记录CSS3动画animation学习小心得

标签：

  上个星期在学习JS之余，温习CSS3，在网上看到一个3D立体球的效果，于是自己也按照上面的方法写了一个：

  效果（请用chrome浏览）： http://htmlpreview.github.io/?https://github.com/yuhaod1/Blog/blob/master/Blog/css3%E7%AB%8B%E4%BD%93%E7%90%83/css3%E7%AB%8B%E4%BD%93%E7%90%83.html

  只做了chrome下的效果，不做其它浏览器的兼容；

  当时写完代码测试的时候，发现效果并不如视频上面的一样，于是，有强迫症的我当然要弄个明白。

  既然是在动画效果上出了问题，那就从这动画的代码上找原因，代码如下：

.boll{
width:500px; height:500px;
transform-style:preserve-3d;
position:relative;
transform:rotateX(-20deg) rotateZ(-20deg) rotateY(0deg);
animation:move 20s linear infinite;
}

@keyframes move{
to{transform:rotateX(-20deg) rotateZ(-20deg) rotateY(360deg);}
}

问题出在：

.boll{transform:rotateX(-20deg) rotateZ(-20deg) rotateY(0deg);}

@keyframes move{
to{transform:rotateX(-20deg) rotateZ(-20deg) rotateY(360deg);}
}

这两段代码上，一开始写代码的时候，顺序是这样的：

.boll{transform:rotateX(-20deg) rotateY(0deg) rotateZ(-20deg);}

@keyframes move{
to{transform:rotateX(-20deg) rotateY(360deg) rotateZ(-20deg);}
}

也就是说把roteteZ() 和 rotateY()的位置调换了，本来要的效果像上面地址那样的，调换位置后效果并不是绕着Y轴自转~

经过反复调换位置发现，动画执行的过程是按照顺序样式表先后发生的，如上代码，先执行rotateX(-20deg) 然后执行rotateY(360deg)，再执行rotateZ(-20deg)，如此循环，直到动画时间结束，所以效果看起来就不是单单绕Y轴转。

如果to{transform:rotateX(-20deg) rotateZ(-20deg) rotateY(360deg);} 像这样的话，每次执行动画，都是先执行transform:rotateX(-20deg) rotateZ(-20deg)，再执行rotateY(360deg)，它看起来的效果就是绕Y轴转的，

通过改变它们之间的顺序，还有以产生其它的效果，记录于止，只为了让自己记住有这么一个小细节；

前端这块，真的很吸引人，学得分外着迷，通过多敲代码，会发现更多有趣的东西！~

记录CSS3动画animation学习小心得

标签：

原文地址：http://www.cnblogs.com/haozid1/p/5380887.html