CSS3-transform,2D動畫實例

2D轉換

　　對元素進行移動。縮放。轉動。拉長 或 拉伸
　　
　　　　所有都須要加前綴。

Transform-2D轉換方法：rotate()旋轉、scale()縮放、skew()扭曲/傾斜、translate()位移、matrix()矩形變形、

　　rotate(angle)：經過角度參數指定一個2D旋轉，在參數中規定角度。

　　skew(x-angle,y-angle)：傾斜，沿着X和Y軸。
　　　　skewX(angle)：沿着X軸。
　　　　skewY(angle)：沿着Y軸。

　　scale(x,y)：轉換，改變元素的寬高。
　　　　scaleX(n)：改變元素寬。
　　　　scaleY(n)：改變元素高。

　　translate(x,y)：轉換，沿着X和Y軸移動元素。
　　　　translateX(n)：沿着X軸移動元素。
　　　　translateY(n)：沿着Y軸移動元素。

　　matrix(n,n,n,n,n,n)：轉換，使用6個值的矩形,較爲複雜，不經常使用。

 

 

DEMO