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

            -webkit-transform:rotateX(-90deg);   
            -moz-transform-origin:top;   
            -moz-transform:rotateX(-90deg);   
            line-height: 80px;   
        }  

　　第五个平面：

CSS Code复制内容到剪贴板

#page5{   
background-color: #6699cc;   
-webkit-transform-origin:bottombottom;   
-webkit-transform:rotateX(90deg);   
-moz-transform-origin:bottombottom;   
-moz-transform:rotateX(90deg);   
line-height: 50px;   
}  

　　第六个平面：

CSS Code复制内容到剪贴板

#page6{   
background-color: #10a6ce;   
-webkit-transform:translateZ(-200px);   
-moz-transform:translateZ(-200px);   
line-height: 50px;   
}  

　　这个第六个平面需要沿着Z轴进行其宽高长度的平移，已达到连接其他平面的目的第六步，定义关键帧动画，代码如下：

CSS Code复制内容到剪贴板

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