前言
上篇文章主要講述了CSS樣式更改中的裁剪、Z-Index、清除、改變?cè)氐奶匦曰A(chǔ)知識(shí)，這篇文章我們來(lái)介紹下CSS樣式更改中2D轉(zhuǎn)換的基礎(chǔ)用法。

2D轉(zhuǎn)換
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).元素旋轉(zhuǎn)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(寬度倍數(shù)，高度倍數(shù))

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).元素翻轉(zhuǎn)給定的角度 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).將前面所有方法進(jìn)行組合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個(gè)數(shù)的矩陣 

6).2D過(guò)度到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方法，并且可以單個(gè)設(shè)置每一種的方法的x,y軸轉(zhuǎn)向值，比如： 
rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。測(cè)試 
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn) 
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn) 
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn) 
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn) 
其它的都是差不多的用法，不過(guò)還有一個(gè)用法不同的就是： 
perspective(n)     為3D轉(zhuǎn)換元素定義透視視圖。 

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

總結(jié)
這篇文章主要介紹了CSS樣式更改篇中的2D轉(zhuǎn)換基本設(shè)置，希望對(duì)大家的學(xué)習(xí)有幫助。