transform變換
1、translate(x,y) 設置盒子位移
2、scale(x,y) 設置盒子縮放
3、rotate(deg) 設置盒子旋轉
4、skew(x-angle,y-angle) 設置盒子斜切
2D 轉換方法
| 函數 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 |
| translate(x,y) | 定義 2D 轉換，沿着 X 和 Y 軸移動元素。 |
| translateX(n) | 定義 2D 轉換，沿着 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉換，沿着 Y 軸移動元素。 |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度。 |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度。 |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿着 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉換，沿着 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉換，沿着 Y 軸。 |
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
div{
width: 150px;
height: 100px;
margin:20px auto 0;
background-color: #8AC007;
font:18px/100px 'microsoft Yahei';
text-align: center;
transition: all 500ms ease;
}
div:first-child:hover{
transform:translateX(50px)
}
div:nth-child(2):hover{
transform:translateY(50px)
}
div:nth-child(3):hover{
transform:translate(50px,50px);
}
div:nth-child(4):hover{
/*transform: scaleX(2);*/
transform: scaleX(0.2);
}
div:nth-child(5):hover{
transform: scaleY(2);
/*transform: scaleY(0.2);*/
}
div:nth-child(6):hover{
transform: scale(2,0.2);
}
div:nth-child(7):hover{
transform: rotate(180deg);
}
div:nth-child(8):hover{
transform: skewX(30deg);
}
div:nth-last-child(2):hover{
transform:skewY(30deg);
}
div:last-child{
width: 200px;
}
div:last-child:hover{
transform: skew(30deg,30deg);
}
</style>
</head>
<body>
<div>translateX</div>
<div>translateY</div>
<div>translate(x,y)</div>
<div>scaleX</div>
<div>scaleY</div>
<div>scale(x,y)</div>
<div>ratate(deg)</div>
<div>skewX(angle)</div>
<div>skewY(angle)</div>
<div>skew(x-angle,y-angle)</div>
</body>
</html>