簡介：transform（變形）是CSS3制作動畫的其中一個屬性，主要包括以下這幾種類型，分別是：rotate（旋轉）、skew（扭曲）、scale（縮放）和translate（移動）。下面介紹主要用法。

1.rotate（旋轉） 用法為：transform:rotate(數字+deg);rotate的參數是度數，即指定對象旋轉的度數，為正數表示順時針旋轉，為負數表示逆時針旋轉，transform:rotate(30deg);表示順時針旋轉30deg，旋轉基點為對象中心點。

2.translate（移動） 用法為：transform:translate(x,y)，參數x,y分別表示水平和垂直兩個方向分別移動的距離，為負數是表示反方向移動，若只寫一個參數則表示x和y方向移動距離相同，即平移。還有translateX和translateY分別表示水平和垂直方向單向移動。移動基點為對象中心點。

3.scale（縮放） 用法為：scale(a,b)，兩個參數分別表示水平和垂直方向的縮放倍數，大于0，以1為基準，小于1表示縮小，大于1表示放大，若只有一個參數則表示兩個值相同。scaleX和scaleY分別表示水平和縱向的縮放倍數。縮放基點為對象中心點。

4.skew（扭曲） 用法為：skew(數字+deg,數字+deg)參數分別表示x和y方向的扭曲度數，注意與前面兩個不同的是，skew的第二個參數若沒設置，表示y方向的扭曲度數為0deg。skewX和skewY分別表示x和y方向的扭曲度數。扭曲基點為對象中心。

在上面的4種類型中都有強調形變的基點為對象的中心點，當然我們也可以根據想要的效果來設置對象的形變基點，通過transform-origin:(x,y)屬性來設置，它的參數為坐標，其中x和y的值可以是百分值,em,px，其中x也可以是字符參數值left,center,right；y也可以是top,center,bottom。

下面是個小練習：

效果如圖： 目前只是簡單的動畫，最終樣子之后再做完善。