CSS樣式更改——2D轉換

###前言
上篇文章主要講述了CSS樣式更改中的裁剪、Z-Index、清除、改變元素的特性基礎知識，這篇文章咱們來介紹下CSS樣式更改中2D轉換的基礎用法。

###2D轉換
1).元素位移translate(左邊,頂邊)

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 */
}

2).元素旋轉rotate(角度)

div
{
transform: rotate(10deg);
-ms-transform: rotate(10deg);    /* IE 9 */
-webkit-transform: rotate(10deg);  /* Safari and Chrome */
-o-transform: rotate(10deg);    /* Opera */
-moz-transform: rotate(10deg);    /* Firefox */
}
rotate()
scale()
skew()
matrix()

3).元素縮放scale(寬度倍數，高度倍數)

div
{
transform: scale(1,2);
-ms-transform: scale(1,2);  /* IE 9 */
-webkit-transform: scale(1,2);  /* Safari 和 Chrome */
-o-transform: scale(1,2);  /* Opera */
-moz-transform: scale(1,2);  /* Firefox */
}

4).元素翻轉給定的角度 skew(x,y)

div
{
transform: skew(13deg,21deg);
-ms-transform: skew(13deg,21deg);  /* IE 9 */
-webkit-transform: skew(13deg,21deg);  /* Safari and Chrome */
-o-transform: skew(13deg,21deg);  /* Opera */
-moz-transform: skew(13deg,21deg);  /* Firefox */
}

5).將前面全部方法進行組合matrix()

div
{
transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);
-ms-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);    /* IE 9 */
-moz-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);  /* Firefox */
-webkit-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);  /* Safari and Chrome */
-o-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);    /* Opera */
}

定義6個數的矩陣

6).2D過分到3D

div{
transform:rotate(1deg);
-ms-transform:rotate(1deg);   /* IE 9 */
-moz-transform:rotate(1deg);   /* Firefox */
-webkit-transform:rotate(1deg); /* Safari 和 Chrome */
-o-transform:rotate(1deg);       /* Opera */
}
它包含了全部的2D方法和3D方法，而且能夠單個設置每一種的方法的x,y軸轉向值，好比：
rotate(angle) 定義 2D 旋轉，在參數中規定角度。測試
rotate3d(x,y,z,angle) 定義 3D 旋轉
rotateX(angle) 定義沿着 X 軸的 3D 旋轉
rotateY(angle) 定義沿着 Y 軸的 3D 旋轉
rotateZ(angle) 定義沿着 Z 軸的 3D 旋轉
其它的都是差很少的用法，不過還有一個用法不一樣的就是：
perspective(n)     爲3D轉換元素定義透視視圖。

參考文檔：W3C官方文檔（CSS篇）

###總結
這篇文章主要介紹了CSS樣式更改篇中的2D轉換基本設置，但願對你們的學習有幫助。
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/