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的簡化版本，是給普通做簡單網頁特效用的。比如你有如下兩個樣式：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表