Transform
在部分的test case當中，每每演示transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思維的人（包括我）認為transform屬性是動畫屬性。而恰恰相反，transform屬性是靜態屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程。transform的主要用途是用來做元素的特殊變形，對于做設計的人來說并不是很陌生，簡單的來說就是css 的圖形變形工具。

關于圖形變形的基礎條件當中的原點設定，在css里面使用的是transform-origin來定義的。這個定義的原點應該是該css作用的元素的左上角為0,0來計算的（有待研究）。其他的屬性則根據這個屬性來計算進行計算。

關于圖形變化的模式，css3標準當中transform-style來定義。默認是flat，展現出來的是簡單的效果。而preserve-3d則將空間呈現為3d模式。從正常的思維來說，應該只需要preserve-3d就好了，但是從謠傳“開啟了perserve-3d就使用了GPU加速”來說，這個屬性可能是為了降低系統消耗用的，畢竟3d比2d要多一個維度的計算。

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

具體的給設計師改變元素樣式用的屬性則有以下五個：

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

總體看來 css transform的屬性和原來使用的left ，right ，top， bottom 的屬性從動靜角度來說沒有任何區別，因此使用的時候應該將transform歸類到這類定位變形的靜態屬性里面。

Transition
transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。比如你有如下兩個樣式：

復制代碼代碼如下:
.position{
left:100px;
top:100px;
}
.animate{
-webkit-transition:left 0.5s ease-out;
left:500px;
top:500px;
}

其中animate的transition的屬性的意思說：當你的left屬性發生變化的時候，執行動畫效果（僅僅基于left的屬性變化，其他的屬性不會加入到動畫變化里面去）；

首先你的元素的css為position。當你將其cssList 增加 animate 或者替換position 為animate的時候，元素的屬性變化，觸發webkit-transition，以指定屬性變化前的值為起始值，變化后的屬性為結束值，執行動畫效果。這是一個簡單的兩點變化過程，大大簡化了animation屬性的復雜程度。