一  2D轉換

轉換是CSS3中具有顛覆性的特征之一，可以實現元素的位移、旋轉、變形、縮放，甚至支持矩陣方式，配合即將學習的過渡和動畫知識，可以取代大量之前只能靠Flash才可以實現的效果。

1、移動 translate(x, y) 可以改變元素的位置，x、y可為負值；

2、縮放 scale(x, y) 可以對元素進行水平和垂直方向的縮放，x、y的取值可為小數，不可為負值；

4、旋轉 rotate(deg) 可以對元素進行旋轉，正值為順時針，負值為逆時針；

5、傾斜 skew(deg, deg) 可以使元素按一定的角度進行傾斜

二  3D轉換

1、3D坐標軸

用X、Y、Z分別表示空間的3個維度，三條軸互相垂直。如下圖

                       

2、左手坐標系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐標系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖

 

3、左手法則

左手握住旋轉軸，豎起拇指指向旋轉軸正方向，正向就是其余手指卷曲的方向。

三   動畫

動畫是CSS3中具有顛覆性的特征之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果。

1、必要元素：

a、通過@keyframes指定動畫序列；

b、通過百分比將動畫序列分割成多個節點；

c、在各節點中分別定義各屬性

d、通過animation將動畫應用於相應元素；

2、關鍵屬性

a、animation-name設置動畫序列名稱

b、animation-duration動畫持續時間

c、animation-delay動畫延時時間

d、animation-timing-function動畫執行速度，linear、ease等

e、animation-play-state動畫播放狀態，play、paused等

f、animation-direction動畫逆播，alternate等

g、animation-fill-mode動畫執行完畢后狀態，forwards、backwards等

h、animation-iteration-count動畫執行次數，inifinate等