transform
transform屬性是靜態屬性，一旦寫到style裡面，將會直接顯示作用，無任何變化過程。transform的主要用途是用來做元素的特殊變形。
關於圖形變形的基礎條件當中的原點設定，在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 來指定透視點。
具體的給設計師改變元素樣式用的屬性則有以下五個：
translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的；
rotate(deg)是用來控制元素旋轉角度的；
skew[x,y](deg) 這個屬性是用來製作傾斜度的，做過設計的人可能會知道，這個是用來在2d裡面建立3d透檢視的時候必須的屬性；
scale3d(x,y,z) 用來放大縮小效果，屬性是比值；
matrix3d，css矩陣。通過這個矩陣屬性，涵蓋了上面所有的屬性值。
總體看來 css transform的屬性和原來使用的left ，right ，top， bottom 的屬性從動靜角度來說沒有任何區別，因此使用的時候應該將transform歸類到這類定位變形的靜態屬性裡面。
transition
transition屬性是乙個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。比如你有如下兩個樣式：
.position
.animate
其中animate的transition的屬性的意思說：當你的left屬性發生變化的時候，執行動畫效果（僅僅基於left的屬性變化，其他的屬性不會加入到動畫變化裡面去）；
首先你的元素的css為position。當你將其csslist 增加 animate 或者替換position 為animate的時候，元素的屬性變化，觸發webkit-transition，以指定屬性變化前的值為起始值，變化後的屬性為結束值，執行動畫效果。這是乙個簡單的兩點變化過程，大大簡化了animation屬性的複雜程度。
同時，如果在transition的動畫當中，屬性值有了新的變化，則會中斷當前的動畫執行，並將中斷時的屬性值提供給新的動畫作為起始值來計算新的動畫效果。
我在css編寫的時候，因為變化的屬性只有transform乙個，因此在transtion屬性裡面指定響應屬性為all，可以響應並執行元素所有屬性的變化動畫（能做動畫的屬性）。
animation
在官方的introduction上介紹這個屬性是transition屬性的擴充套件。但是這個簡單的介紹裡面包含了不簡單的東西：keyframes。
做過flash動畫的人都會知道，flash裡面有兩個基礎**：時間軸和關鍵幀。而css keyframes的出現，則是提供了flash世界裡面的這兩個屬性的合集。看乙個簡單的 keyframes 的示例：
@keyframes 'wobble'
30%100%
}.animate
上面這個**展示了乙個keyframes 'wobble'，其中 0％ 代表在變化中不同時間點的屬性值，你可以較精確的控制動畫變化中任何乙個時間點的屬性效果。而animation則根據這個keyframes提供的屬性變化方式去計算元素動畫當中的屬性。與 transition 不同的是，keyframes提供更多的控制，尤其是時間軸的控制，這點讓css animation更加強大，使得flash的部分動畫效果可以由css直接控制完成，而這一切，僅僅只需要幾行**，也因此誕生了大量（比起flash來說算是大量了）基於css的animation tools，用來取代flash的動畫部分。關於動畫工具，可以參考web standards-based animation tools.
另外在animation屬性裡面還有乙個最重要的就是：animation-fill-mode，這個屬性標示是以(from/0%)指定的樣式 還是以(to/100%)指定的樣式為動畫完成之後的樣式。這個很方便我們控制動畫的結尾樣式，保證動畫的整體連貫。
transform: matrix(1, 0, 0, 1, 30, 30);就等同於transform: translate(30px, 30px);
translate() 方法
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數：
例項div
值 translate(50px,100px) 把元素從左側移動 50 畫素，從頂端移動 100 畫素。
rotate() 方法
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
例項div
值 rotate(30deg) 把元素順時針旋轉 30 度。
scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（x 軸）和高度（y 軸）引數：
例項div
值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（x 軸）和垂直線（y 軸）引數：
例項div
值 skew(30deg,20deg) 圍繞 x 軸把元素翻轉 30 度，圍繞 y 軸翻轉 20 度。
Css3中的背景
css3對背景作了很多改變，最明顯的是可以選擇多重背景，同時它也增加了四個新的屬性。多重背景 css3中，對乙個元素可以使用一張以上的背景。除了使用逗號將分開以外，其 與css2相同。第乙個宣告的定位在元素的頂部，接下來的層列於下，像這樣 該屬確定背景畫區，有以下幾種可能的屬性 background...
CSS3中的動畫
animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...
CSS3中的屬性
讓邊框變成圓角 border radius 100px border radios 10px 20px 30px 40px transform rotate 45deg retate是順時針旋轉角度 transform translate 50px,100px 把元素從左側移動 50 畫素，從頂端移...