CSS3 轉(zhuǎn)換

通過 CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M行移動、縮放、轉(zhuǎn)動、拉長或拉伸

017abe56a6de5332f875520f317fd0.gif

2D轉(zhuǎn)換

2D 轉(zhuǎn)換方法：

• translate()
• rotate()
• scale()
• skew()
• matrix()

translate() 方法

通過 translate() 方法，元素從其當前位置移動，根據(jù)給定的 left（x 坐標） 和 top（y 坐標） 位置參數(shù)：

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() 方法，元素順時針旋轉(zhuǎn)給定的角度。允許負值，元素將逆時針旋轉(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() 方法，元素的尺寸會以倍數(shù)對原尺寸縮放，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)。

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ù)。
但是我認為skew()方法是沿著水平線（X 軸）或垂直線（Y 軸）進行扭曲。所謂沿著就是順著的意思，例如，你沿著一條路走，那么你行走的方向肯定是路延伸的方向（和路平行走），不可能是垂直路走，那不叫沿著。
scaleX(n)，表示沿X軸左右傾斜。scaleX(10deg),表示在當前位置，向左傾斜10度。

1506418356(1).png

1506419170(1).png

matrix() 方法

matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個參數(shù)，包含數(shù)學函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動以及傾斜元素。如果您想詳細了解該方法的使用原理，您可以移駕這里。
使用 matrix 方法將 div 元素旋轉(zhuǎn) 30 度：

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Opera */
}

您可以在這嘗試效果。
歡迎各位朋友批評指正，多多交流。

u=947758405,3504565761&fm=27&gp=0.jpg

參考資料：W3SCHOOL