用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

() , false
);}, 
false);

$obj.on('animationend', function

() );

相容性：

動畫開始 webkitanimationstart | oanimationstart | msanimationstart | animationstart

動畫結束 webkitanimationend | oanimationend | msanimationend | animationend

動畫重複 webkitanimationiteration | oanimationiteration | msanimationiteration | animationiteration

同樣的，transition也有相應的監聽事件，需要的朋友可以上一下度娘。

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

var animationeventnames =,

animationeventname = animationeventnames[modernizr.prefixed('animation')];
$obj.on(animationeventname, 
function
() );

demo

原始碼

CSS3動畫 3D旋轉

學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...

css3之3d動畫呈現

利用css3完成3d效果的簡單呈現 動畫效果用呈現不出來，大家自己動手寫乙個看看吧 新建html lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head c...

css3動畫效果和3D模型

今天了解了css3的動畫漸變效果，如果我們要對頁面中的某個元素的樣式進行變化，就不用js或jquery苦苦的寫 了，直接用css3的這個transition這個屬性就ok，方便快捷，下面請看demo。我要對某個div操作，例如 當滑鼠移入div中，改變其width height和background...