2D轉(zhuǎn)換
- translate()
通過 translate() 方法，元素從其當(dāng)前位置移動，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)。（效果相當(dāng)于定位）
| 函數(shù) |
描述 |
| translate(x,y) |
定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動元素。 |
| translateX(n) |
定義 2D 轉(zhuǎn)換枕屉，沿著 X 軸移動元素。 |
| translateY(n) |
定義 2D 轉(zhuǎn)換鲤氢，沿著 Y 軸移動元素搀擂。 |
div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
/*值 translate(50px,100px) 把元素從左側(cè)移動 50 像素，從頂端移動 100 像素*/
}
- rotate()
rotate(deg)
通過 rotate() 方法卷玉，元素順時針旋轉(zhuǎn)給定的角度哨颂。允許負(fù)值，元素將逆時針旋轉(zhuǎn)相种。
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
/*值 rotate(30deg) 把元素順時針旋轉(zhuǎn) 30 度*/
}
- scale()
通過 scale() 方法威恼，元素的尺寸會增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)。
| 函數(shù) |
描述 |
| scale(x,y) |
定義 2D 縮放轉(zhuǎn)換箫措，改變元素的寬度和高度腹备。 |
| scaleX(n) |
定義 2D 縮放轉(zhuǎn)換，改變元素的寬度斤蔓。 |
| scaleY(n) |
定義 2D 縮放轉(zhuǎn)換植酥，改變元素的高度。 |
div{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
/*值 scale(2,4) 把寬度轉(zhuǎn)換為原始尺寸的 2 倍弦牡，把高度轉(zhuǎn)換為原始高度的 4 倍*/
}
- skew()
通過 skew() 方法友驮，元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)驾锰。
| 函數(shù) |
描述 |
| skew(x-angle,y-angle) |
定義 2D 傾斜轉(zhuǎn)換喊儡，沿著 X 和 Y 軸。 |
| skewX(angle) |
定義 2D 傾斜轉(zhuǎn)換稻据，沿著 X 軸。 |
| skewY(angle) |
定義 2D 傾斜轉(zhuǎn)換买喧，沿著 Y 軸捻悯。 |
div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
/*值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉(zhuǎn) 30 度，圍繞 Y 軸翻轉(zhuǎn) 20 度淤毛。*/
}
- matrix()
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起今缚。
matrix() 方法需要六個參數(shù)，包含數(shù)學(xué)函數(shù)低淡，允許您：旋轉(zhuǎn)姓言、縮放、移動以及傾斜元素蔗蹋。
