用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地址 源码