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

posted @ 2016-03-01 15:05  Daryl  阅读(3128)  评论(0编辑  收藏

Contact with me