CSS3中的transition和transform是制作HTML5動畫一定要使用到的兩個屬性。
注：這篇文章不考慮相容性，隻讨論webkit核心的浏覽器。是以本文的所有例子請用chrome，safari或360極速浏覽器看。
transition對标簽的變化過程進行設定。比如我需要将這個圖在2s内進行翻轉180的動畫，就使用到這個了
transition可以配置的屬性有：
值可以是這麼幾個：
是否延遲執行變化，機關為s，預設值為0
要了解transition-timimg-funtion的幾個漸變函數的意思，要知道的知識是貝塞爾曲線
貝塞爾曲線是計算機圖形圖像繪制曲線的基本工具。它的出現能使得在計算機上繪制出曲線變成可能。其中的三階貝塞爾曲線可以通過四個點（不一定在曲線上）确定一個曲線。
貝塞爾曲線有1階，2階，3階… n階的形式
也稱作為線性貝塞爾曲線,公式如下：
如果将1階的貝塞爾曲線應用在坐标圖上，那麼這個曲線就是一條直線：
假設P0是坐标點(0,0)P1是坐标點(1, 2)。随着t從0開始不斷變化成1，B(t)會得出一系列坐标點集合（這個集合當然是無限集合），将這些坐标點畫成一條線，那麼這條線就是一條直線
公式為：
這裡會看到有四個系數P0，P1，P2，P3。換句話說，如果指定了這四個系數，那麼我們就能得到一個貝塞爾值的集合。
這裡要說一下，這四個系數可以是數值，也可以是二維坐标（比如平面坐标點），也可以是三維坐标（比如顔色RGB）。transition的timing-funtion如果作用在顔色上，這些系數就是使用三維坐标。
是以transition的timing-function這個屬性的不同值就是對應了不同的P系數，其實最後呈現出來的效果就是不同的變化速度。這個頁面有個例子：
<a href="http://www.funaio.com/html5/trans/transition.html">http://www.funaio.com/html5/trans/transition.html</a>
我使用ease-in和ease-out來改變圖檔的旋轉速度，你能很明顯地感覺到ease-in是在開始旋轉速度慢，後來旋轉速度快，ease-out則相反。
當然貝塞爾曲線是有n階的通用形式的：
transform指的是變換，一個東西的拉伸，壓縮，旋轉，偏移等就是使用這個屬性。
transform可以設定這些函數：
将元素進行旋轉，機關為deg。如rotate(45deg)
将元素進行平移。這個屬性是可以有兩個參數的，分别表示向X軸和向Y軸進行平移的量，機關為px，第二個參數可以預設不填寫
比如translate(20px,30px)
将元素進行放大或縮小。記住，這裡的放大和縮小不一定是維持比例的。
scale的參數有兩個，分别表示向X軸和Y軸進行放大的倍數，大小在0~正無窮，第二個參數可以預設不填寫，如果不填寫則是預設等比放大縮小。比如scale(2)
斜切變化。參數為角度deg
skew的參數有兩個，分别表示X軸Y軸的斜切變化，第二個參數可以不填寫，如果不填寫，Y軸斜切無變化
注：其實transform還設有一個屬性matrix，這個屬性是以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。在下面的文章中會解釋到的。
w3官網上有一篇文章從數學的角度來分析transform:
<a href="http://www.w3.org/TR/SVG/coords.html">http://www.w3.org/TR/SVG/coords.html</a>
每個元素在html頁面上所占有的區域稱作viewport,這個區域可以建立出一個二維坐标系（Coordinate system），這個元素的所有圖畫上的點在二維坐标系上都有對應的x和y點
transform做的事實際上是将這個二維坐标系進行拉伸，放大，斜切變化。這個變化可以使用一個矩陣來表示：
如果原來的坐标軸表示成為1*3矩陣（這裡使用1*3而不是使用1*2矩陣應該是考慮3D的變換吧，其實在介紹transform的時候，z的值一直設定為1，沒有參與任何運算）：
每個transform變化表示為1個3*3的矩陣（也成變化矩陣）
這裡可以看到第三行為0,0,1，這就意味着這個transform不對z軸空間進行改變。是以其實上面可以填寫的參數也隻有6個了[a,b,c,d,e,f]，看到這裡就明白了transform的matrix的6個參數是什麼意思
比如拉伸的變化矩陣為：
這個拉伸的變化矩陣設定了a和d，其餘的設定為0
-webkit-transform:scale(2,2);
-webkit-transform:matrix(2,0,0,2,0,0);
這兩個設定其實效果是一樣
更多的變化矩陣請直接看w3的那篇文章
同理，如果對一個元素同時進行了拉伸和旋轉效果，其實際上的效果是将拉伸的變化矩陣和旋轉的變化矩陣相乘，兩個3*3的矩陣相乘結果還是3*3矩陣，最後得到的矩陣才是實際的變化效果
下面說說transform-origin
上面說transform的變化其實是将坐标軸進行拉伸旋轉等變化，那麼坐标軸有一個原點，這個原點就是這個屬性進行設定的了。記住，原點是永遠不會變化位置的（因為它的坐标為0,0,1）。
transform-origin有兩個參數，這兩個參數可以是百分比，em，px等具體的值，也可以是left,center,right,top,button這樣的描述性語句
就是說
-webkit-transform-origin:right top;
-webkit-transform-origin:100% 0%;
這兩個其實是一樣的
這裡給一個例子：
其中一個圖檔隻設定了：
.transition_function1:hover{
}
另外一個圖檔設定了：
.transition_function2:hover{
點選檢視效果：
<a href="http://www.funaio.com/html5/trans/transform.html">http://www.funaio.com/html5/trans/transform.html</a>
3D效果是個很複雜的東西，以後再寫一篇來專門研究吧。這裡奉上幾個css3 3D效果（請使用webkit浏覽器）：
圖檔翻轉：
<a href="http://www.funaio.com/html5/trans/fanzhuan.html">http://www.funaio.com/html5/trans/fanzhuan.html</a>
三行翻轉（有點像google圖書館）：
<a href="http://www.webkit.org/blog-files/3d-transforms/poster-circle.html">http://www.webkit.org/blog-files/3d-transforms/poster-circle.html</a>
本文轉自軒脈刃部落格園部落格，原文連結：http://www.cnblogs.com/yjf512/archive/2012/07/14/2591817.html，如需轉載請自行聯系原作者