CSS3中的transition和transform是制作HTML5動畫一定要使用到的兩個屬性。

注：這篇文章不考慮兼容性，只討論webkit核心的瀏覽器。所以本文的所有例子請用chrome，safari或360極速瀏覽器看。

transition

transition對標簽的變化過程進行設置。比如我需要將這個圖在2s內進行翻轉180的動畫，就使用到這個了

?

transition可以配置的屬性有：

transision-property

要變化的屬性，可以的參數請參考：http://www.zhangxinxu.com/css3/css3-transition-property.php

transition-duration

變化的速度，單位為s?http://www.zhangxinxu.com/css3/css3-transition-duration.php

transition-timing-funtion

使用的是貝塞爾曲線的方式漸變?http://www.zhangxinxu.com/css3/css3-transition-timing-function.php

值可以是這么幾個：

transition-delay

是否延遲執行變化，單位為s，默認值為0

?

要理解transition-timimg-funtion的幾個漸變函數的意思，要知道的知識是貝塞爾曲線

貝塞爾曲線

貝塞爾曲線是計算機圖形圖像繪制曲線的基本工具。它的出現能使得在計算機上繪制出曲線變成可能。其中的三階貝塞爾曲線可以通過四個點（不一定在曲線上）確定一個曲線。

?

貝塞爾曲線有1階，2階，3階… n階的形式

?

1階的貝塞爾曲線

也稱作為線性貝塞爾曲線,公式如下：

如果將1階的貝塞爾曲線應用在坐標圖上，那么這個曲線就是一條直線：

假設P0是坐標點(0,0)P1是坐標點(1, 2)。隨著t從0開始不斷變化成1，B(t)會得出一系列坐標點集合（這個集合當然是無限集合），將這些坐標點畫成一條線，那么這條線就是一條直線

這個圖畫得很矬，http://zh.wikipedia.org/w/index.php?title=%E8%B2%9D%E5%A1%9E%E7%88%BE%E6%9B%B2%E7%B7%9A&variant=zh-cn?上有個動態圖非常清晰

?

三階的貝塞爾曲線

公式為：

這里會看到有四個系數P0，P1，P2，P3。換句話說，如果指定了這四個系數，那么我們就能得到一個貝塞爾值的集合。

?

這里要說一下，這四個系數可以是數值，也可以是二維坐標（比如平面坐標點），也可以是三維坐標（比如顏色RGB）。transition的timing-funtion如果作用在顏色上，這些系數就是使用三維坐標。

?

所以transition的timing-function這個屬性的不同值就是對應了不同的P系數，其實最后呈現出來的效果就是不同的變化速度。這個頁面有個例子：

http://www.funaio.com/html5/trans/transition.html

我使用ease-in和ease-out來改變圖片的旋轉速度，你能很明顯地感覺到ease-in是在開始旋轉速度慢，后來旋轉速度快，ease-out則相反。

?

當然貝塞爾曲線是有n階的通用形式的：

transform

transform指的是變換，一個東西的拉伸，壓縮，旋轉，偏移等就是使用這個屬性。

?

transform可以設置這些函數：

rotate

將元素進行旋轉，單位為deg。如rotate(45deg)

translate

將元素進行平移。這個屬性是可以有兩個參數的，分別表示向X軸和向Y軸進行平移的量，單位為px，第二個參數可以默認不填寫

比如translate(20px,30px)

scale

將元素進行放大或縮小。記住，這里的放大和縮小不一定是維持比例的。

scale的參數有兩個，分別表示向X軸和Y軸進行放大的倍數，大小在0~正無窮，第二個參數可以默認不填寫，如果不填寫則是默認等比放大縮小。比如scale(2)

skew

斜切變化。參數為角度deg

skew的參數有兩個，分別表示X軸Y軸的斜切變化，第二個參數可以不填寫，如果不填寫，Y軸斜切無變化

?

基本的操作就是這些，這里有一篇文章有很好地例子展示：http://hi.baidu.com/rolly_zhang/item/9cc5d24b454f1f07c0161303

?

注：其實transform還設有一個屬性matrix，這個屬性是以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。在下面的文章中會解釋到的。

?

數學的角度來分析transform

w3官網上有一篇文章從數學的角度來分析transform:

http://www.w3.org/TR/SVG/coords.html

?

每個元素在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-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{

-webkit-transform:scale(2,2);

}

另外一個圖片設置了：

.transition_function2:hover{

-webkit-transform:scale(2,2);

-webkit-transform-origin:right top;

}

點擊查看效果：

http://www.funaio.com/html5/trans/transform.html

?

3D效果

3D效果是個很復雜的東西，以后再寫一篇來專門研究吧。這里奉上幾個css3 3D效果（請使用webkit瀏覽器）：

圖片翻轉：

http://www.funaio.com/html5/trans/fanzhuan.html

三行翻轉（有點像google圖書館）：

http://www.webkit.org/blog-files/3d-transforms/poster-circle.html

轉載于:https://www.cnblogs.com/liaojie970/p/7645801.html

總結

以上是生活随笔為你收集整理的CSS3的transition和transform的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。