用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支持比较好的浏览器打开哈）。

github地址 源码