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

　　在css3中，X轴正方向向右，Y轴正方向向下，Z轴正方向由屏幕内伸向屏幕外，这和立体几何中的坐标系定义不同。

　　第三步，为id为group的div设置css属性，这个div主要是将色子的6个平面组合在一起，便于定义整体动画效果，代码如下：

C# Code复制内容到剪贴板

#group{   
            width: 200px;   
            height: 200px;   
            position: relative;   
            -webkit-transform-style:preserve-3d;   
  
            -moz-transform-style:preserve-3d;   
            margin: 200px auto;   
  
        }  

　　　　这里定义了该div的宽高，并定义其position为relative，便于其中的六个平面相对于这个div进行绝对定位，同时transform-style:preserve-3d这个属性告诉浏览器，所有transform变换都是在3D空间中的变换，而不是在2D空间中，同样为了兼容加上了前缀。

　　第四步，定义每个平面div的通用page属性，即每个色子平面共同的CSS属性，代码如下：

CSS Code复制内容到剪贴板

.page{   
           width: 200px;   
           height: 200px;   
           position: absolute;   
           border-radius: 20px;   
           text-align: center;   
           font-weight: bold;   
           opacity: 0.5;   
           overflow: hidden;   
           filter:alpha(opacity=50);   
           font-size:150px;   
           word-break:break-all;   
           word-wrap:break-word;