Transform
在部分的test case當(dāng)中，每每演示transform屬性的，看起來(lái)好像都是帶動(dòng)畫。這使得小部分直覺(jué)化思維的人（包括我）認(rèn)為transform屬性是動(dòng)畫屬性。而恰恰相反，transform屬性是靜態(tài)屬性，一旦寫到style里面，將會(huì)直接顯示作用，無(wú)任何變化過(guò)程。transform的主要用途是用來(lái)做元素的特殊變形，對(duì)于做設(shè)計(jì)的人來(lái)說(shuō)并不是很陌生，簡(jiǎn)單的來(lái)說(shuō)就是css 的圖形變形工具。

關(guān)于圖形變形的基礎(chǔ)條件當(dāng)中的原點(diǎn)設(shè)定，在css里面使用的是transform-origin來(lái)定義的。這個(gè)定義的原點(diǎn)應(yīng)該是該css作用的元素的左上角為0,0來(lái)計(jì)算的（有待研究）。其他的屬性則根據(jù)這個(gè)屬性來(lái)計(jì)算進(jìn)行計(jì)算。

關(guān)于圖形變化的模式，css3標(biāo)準(zhǔn)當(dāng)中transform-style來(lái)定義。默認(rèn)是flat，展現(xiàn)出來(lái)的是簡(jiǎn)單的效果。而preserve-3d則將空間呈現(xiàn)為3d模式。從正常的思維來(lái)說(shuō)，應(yīng)該只需要preserve-3d就好了，但是從謠傳“開啟了perserve-3d就使用了GPU加速”來(lái)說(shuō)，這個(gè)屬性可能是為了降低系統(tǒng)消耗用的，畢竟3d比2d要多一個(gè)維度的計(jì)算。

如果需要使用3d模式，必須先指定style為3d，并在任意父元素上增加 perspective及 perspective-origin 來(lái)指定透視點(diǎn)。

具體的給設(shè)計(jì)師改變?cè)貥邮接玫膶傩詣t有以下五個(gè)：

     1、translate3d(x,y,z) 是用來(lái)控制元素的位置在頁(yè)面上的三軸的位置的；
     2、rotate(deg)是用來(lái)控制元素旋轉(zhuǎn)角度的；
     3、skew[x,y](deg) 這個(gè)屬性是用來(lái)制作傾斜度的，做過(guò)設(shè)計(jì)的人可能會(huì)知道，這個(gè)是用來(lái)在2d里面創(chuàng)建3d透視圖的時(shí)候必須的屬性；
     4、scale3d(x,y,z) 用來(lái)放大縮小效果，屬性是比值；
     5、matrix3d，css矩陣。通過(guò)這個(gè)矩陣屬性，涵蓋了上面所有的屬性值，但是個(gè)人覺(jué)得可讀性極差（全都是數(shù)字和單位，背起來(lái)有點(diǎn)模糊），目前沒(méi)有理由推薦使用。

總體看來(lái) css transform的屬性和原來(lái)使用的left ，right ，top， bottom 的屬性從動(dòng)靜角度來(lái)說(shuō)沒(méi)有任何區(qū)別，因此使用的時(shí)候應(yīng)該將transform歸類到這類定位變形的靜態(tài)屬性里面。

Transition
transition屬性是一個(gè)簡(jiǎn)單的動(dòng)畫屬性，非常簡(jiǎn)單非常容易用?？梢哉f(shuō)它是animation的簡(jiǎn)化版本，是給普通做簡(jiǎn)單網(wǎng)頁(yè)特效用的。比如你有如下兩個(gè)樣式：