css3製作動畫的幾個屬性：變形(transform)，過渡(transition)和動畫(animation)。
首先介紹transform變形。
transform英文意思：改變，變形。
css3中transform主要包括以下幾種：旋轉(rotate),扭曲(skew)，縮放（scale)、移動(translate)和矩陣變形matrix。
語法：
transform ： none | [ ]*none就是預設值，不進行變形。transform: rotate | scale | skew | translate |matrix;
:表示乙個或多個變換函式，以空格分開。即可同時對乙個元素進行transform的多種屬性操作，例如同時用rotate,scale和translate三種。
rotate()rotate() :通過指定的角度引數對元素指定乙個2d rotation(2d旋轉)，需先有transform-origin屬性的定義。skewx()
skewy()
scale()
translate()
matrix()
transform-origin定義的是旋轉的基點，其中angle是指選擇角度，正順時針旋轉，負逆時針旋轉。
rotate是乙個很有用的動畫，可配合animation做出非常有意思的效果，看綜合例項效果。
translate()函式可以把元素從原來的位置移動，而不影響在x，y軸上的任何web元件，類似於position:relative。
根據給定的left（x座標），top(y座標)位置引數，元素從其當前位置移動。
translate()分三種情況：
note:translate移動的基點預設為元素中心點，可以根據transform-origin改變基點。
如果第二個值沒設定，預設為0。
相當於translate(x,0,)的簡寫，基點為元素中心點。
相當於translate(0,y)的簡寫，基點為元素在中心。
scale縮放和translate移動非常相似，也有三種情況。
縮放中心點：即元素的中心位置
基數：縮放就是既可以縮小，也可以放大；縮放基數為1，大於1放大，小於1縮小。
note：第二個引數未提供則取與第乙個一樣的值。
scale可以取負值，負值會讓元素翻轉並縮放。
這個屬性是用來製作傾斜度的,設計時在2d裡面建立3d透檢視的時候必須的屬性。
skew和translate、scale一樣有三種情況。
即x軸和y軸同時按照一定的角度值進行扭曲變形。
如果第二個引數未提供，則值為0，也就是y軸無斜切。
matrix(, , , , , ):以乙個含六值的(a,b,c,d,e,f)變換矩陣的形式指定乙個2d變換,相當於直接應用乙個[a,b,c,d,e,f]變換矩陣。就是基於水平方向和垂直方向重新定位元素。
svg，css3，html5的canvas中都有矩陣變換，接下來簡單說說。
乙個元素渲染後就可以得到一張位圖，然後對這個點陣圖上每一點進行變換，就可以得到新的一張位圖，從而產生平移，縮放，旋轉，切變及映象反射等效果。
2d矩陣變換都提供6個引數a,b,c,d,e,f，基本公式為：
其中，x和y是元素最開始的座標，x'和y'是矩陣變換後得到的新座標。
note:變換矩陣中a,b,c,d,e,f6個引數是豎著排的。
x'=ax+cy+ex'=ax+ cy+e，我們設a=1,c=0,則x'=x+e，y'=bx+dy+f
y'=bx+dy+f,同樣設b=0,d=1,則y'=y+f。
這就是translate(e,f)了。
所以說translate(e,f)就是簡化了的變換矩陣matrix(1,0,0,1,e,f)，
(x,y)平移(tx,ty)，就意味著做了乙個【1 0 0 1 tx,ty】的矩陣變換。
x'=ax+cy+e，我們設c=0,e=0,則x'=ax，
y'=bx+dy+f,我們設b=0,f=0,則y'=dy。
這就是scale(a,d)了。
所以說scale(a,d)就是簡化了的變換矩陣matrix(a,0,0,d,0,0)。
(x,y)縮放（sx,sy），就意味著做了乙個【sx 0 0 sy 0 0】的矩陣變換。
rotate(a deg)等價於【cons(a) sin(a) -sin(a) cons(a) 0 0】矩陣變換。
skewx(a deg)等價於【1 0 tan(a) 1 0 0】的矩陣變換。
skewy(a deg)等價於【1 tan(a) 0 1 0 0】的矩陣變換。
所以說matrix就是將所有的2d效果全部組合在了一起使用。
前面說了，元素預設的基點是其中心位置，可用transform-origin改變其基點。
使用：transform-origin(x,y):用來設定元素的基點（參考點）。預設點是元素的中心點。x，y的值可以是百分比，em,px，其中x也可以是left,center,right，y可以是top,center,bottom，這點和background-position一樣。
前端開發中需要用到的變換矩陣
css3:transform與transition背後的數學原理[winter]
css3 2d transform
w3c css3-2d-transforms
w3c rotationdefined
w3 文件，關於座標系以及矩陣變換屬性
w3 文件，svg中的3d變換矩陣
w3 文件，css 3中的3d變換矩陣
transform-style和perspective屬性
純css旋轉，各種動畫，可作為載入時動畫【updated 2015,8,4】
CSS3中的變形與動畫（一）
css3變形篇 旋轉rotate 旋轉rotate 函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定乙個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉 如果這個值為負值，元素相對原點中心逆時針旋轉。例子 扭曲skew 扭曲skew 函式能夠讓元...
CSS3中的變形與動畫
css3常見的動畫效果的實現，其實主要是靠transition和animation。而通常，這兩個又會和css3中的新屬性transform來搭配使用 那麼這三個東西其實是幹什麼用的呢？我按我自己的理解來下個簡單結論。transform 把元素變形 transition 元素的屬性變化時，給他乙個過...
Css3中的變形與動畫
下面的 列出了所有的轉換屬性 屬性描述 csstransform 向元素應用 2d 或 3d 轉換。3transform origin 允許你改變被轉換元素的位置。32d transform 方法 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。translate x,y ...