一款基于css3麻将筛子3D翻转特效的实例教程

  
           }   
  
           50% {   
               -webkit-transform:rotateY(360deg) rotateX(0deg) ;   
           }   
  
           100% {   
               -webkit-transform:rotateY(360deg) rotateX(360deg);   
           }   
  
               }  

　　这里的动画分为两个阶段，从0%到50%，该色子沿着Y轴进行360度旋转，从50%到100%的时间内，沿着X轴再进行360度旋转，这样完成一次动画效果，同样为了兼容，给关键帧keyframes前面加上了前缀

　　第七步，在id为group的div中使用CSS调用前面定义的关键帧动画，这里由于需要改色子六个平面同时发生变换，所以需要在六个平面的父div上调用动画.

CSS Code复制内容到剪贴板

#group{   
           width: 200px;   
           height: 200px;   
           position: relative;   
           -webkit-transform-style:preserve-3d;   
           -moz-transform-style:preserve-3d;   
           margin: 200px auto;   
           -webkit-animation:scroll 8s linear 0s infinite;   
           -moz-animation:scroll 8s linear 0s infinite;   
       }  

　　在第三步的结果上加上了animation:scroll 8s linear 0s infinite;CSS属性，表示调用名为scroll的动画，一次动画完成时间为8s,动画变换的速度为匀速，立即开始执行动画并进行无限动画效果的循环。