用CSS3作3D動畫的那些事

年會作了個3D變換的抽獎系統，在這裏分享下經過CSS3製做3D效果的心得。抽獎系統雖然夠炫酷，惋惜抽的時候出了點bug，好幾百人啊個人當心髒啊。雖然這個鍋後面甩給會場的老爺電腦了（手動白眼）。

 

首先介紹幾個實現3D效果的CSS3屬性：

rotateY、translateZ

這兩個transform屬性值是實現3D效果比較經常使用的，首先要記清楚變換的座標軸，X-水平、Y-豎直、Z垂直屏幕。

效果：

從左到右依次爲：正常，translateZ(-200px)，rotateY(45deg)。不過有點奇怪的是綠色的卡片有點變形，由於在父容器上添加了透視距離的屬性，見下。

 

perspective

該屬性爲定義3D變換的元素與視圖的距離，也就是透視距離。該屬性不是添加在變換的元素上，而是添加到視圖元素（變換元素的父元素）上。

在未定義該屬性的狀況下，translateZ 並不會生效，由於沒有透視距離。若你的元素沿Z軸的移動值並非基於百分比的狀況下，只需保證 prespective 值大於 translateZ 值便可。

使用perspective屬性須要謹慎，添加了透視距離有可能致使如上例中綠色卡片的效果。

兼容性：-webkit-perspective | perspective (如下CSS屬性存在的兼容性寫法均參考自W3CSchool)。

 

transform-style: flat | preserve-3d

定義變換方式

flat：子元素將不保留其 3D 位置

preserve-3d：子元素將保留其 3D 位置。

在作3D變換時，咱們一般將該屬性添加在變換元素上，並將值設爲preserve-3d。

兼容性：-webkit-transform-style | transform-style

 

backface-visibility: visible | hidden

是否隱藏元素背面

效果：

上面五張卡片從左到右，rotate值依次爲45deg、60deg、135deg、180deg、300deg，很直觀的展現了該屬性的效果。

兼容性：-webkit-backface-visibility | -moz-backface-visibility | -ms-backface-visibility | backface-visibility

 

有關性能

衆所周知CSS3動畫性能要比JS動畫好，那在CSS3動畫中要作哪些來提高性能呢？

1. 使用3D變換開啓GPU加速：變換元素上添加屬性： transform: translate3d(0,0,0);

2. 使用translate代替left或者marginLeft；

3. 使變換元素脫離文檔流；

4. 減小陰影和圓角的使用。

 

事件

有人說JS動畫相比CSS3動畫的優勢是能夠監聽到動畫的結束，但其實CSS3動畫同樣有監聽各個階段的方法：

動畫開始 animationstart

動畫結束 animationend

動畫重複 animationiteration

監聽：

原生 & jQuery

obj.addEventListener('animationend', function() { obj.removeEventListener('animationend', function(){}, false); }, false);

$obj.on('animationend', function() { $obj.off('animationend'); });

對於須要屢次監聽的，每次最好取消事件綁定。

兼容性：

動畫開始 webkitAnimationStart | oAnimationStart | MSAnimationStart | animationstart

動畫結束 webkitAnimationEnd | oAnimationEnd | MSAnimationEnd | animationend

動畫重複 webkitAnimationIteration | oAnimationIteration | MSAnimationIteration | animationiteration

一樣的，transition也有相應的監聽事件，須要的朋友能夠上一下度娘。

 

對於不一樣瀏覽器怎麼判斷如何選取相應的事件名稱：

這裏推薦一個處理H5&CSS3對瀏覽器兼容問題很方便的第三方庫——modernizr.js，引入該庫後直接上寫法，內容細節這裏不探討了，有興趣的朋友能夠百度詳細瞭解。

var animationEventNames = { 　　　　'WebkitAnimation': 'webkitAnimationEnd',
　　　　'OAnimation': 'oAnimationEnd', 　　　　'msAnimation' : 'MSAnimationEnd', 　　　　'animation' : 'animationend' 　　},
　　animationEventName = animationEventNames[Modernizr.prefixed('animation')];
 $obj.on(animationEventName, function() { $obj.off(animationEventName); });

 

最後貼出本身作的DEMO，模仿自博客園「夢想天空」裏的一個特效（儘可能用chrome,ff等對CSS3支持比較好的瀏覽器打開哈）。

DEMO     源碼