transform屬性向元素應(yīng)用2D或3D轉(zhuǎn)換，該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)，縮放，移動(dòng)或傾斜。
注：Chrome和Safari要求前綴 -webkit- 版本；Internet Explorer 9要求前綴 -ms- 版本。
2D轉(zhuǎn)換方法：
- translate() 根據(jù)左(x軸)和頂部(y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)。
如：
div{
transform:translate(50px,100px);/*是從左邊元素移動(dòng)50個(gè)像素，并從頂部移動(dòng)100像素*/
-ms-transform:translate(50px,100px);
-webkit-transform:translate(50px,100px);
}
- rotate()在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素，負(fù)值是允許的，這樣元素是逆時(shí)針旋轉(zhuǎn)。
div{
transform:rotate(30deg);/*順時(shí)針旋轉(zhuǎn)30度*/
}
- scale()元素增加或減少的大小，取決于寬度(x軸)和高度(y軸)的參數(shù)；
div{
transform:scale(2,3);/*轉(zhuǎn)變寬度為原來的大小的2倍，和其原始大小3倍的高度*/
}
- skew():包含兩個(gè)參數(shù)值，分別表示x軸和y軸傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。
- skewX(<angle>):表示只在X軸(水平方向)傾斜。
- skewY(<angle>):表示只在Y軸(垂直方向)傾斜。
div{
transform:skew(30deg,40deg);/*元素在X軸傾斜30度，在Y軸上傾斜40度*/
}
- matrix()方法和2D變換方法合并成一個(gè)。
matrix方法有六個(gè)參數(shù)，包含旋轉(zhuǎn)，縮放，移動(dòng)(平移)和傾斜功能。
div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);/*使div元素旋轉(zhuǎn)30度*/
}
3D轉(zhuǎn)換方法：
注：緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。
- rotateX()：圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素。
- rotateY()：圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素。
圖片來自菜鳥教程網(wǎng).png
