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

　　这里定义了每个平面的宽高和其父div group的宽高相同，进行绝对定位，（只有绝对定位了，让其脱离文档流，才能够应用transform3D变换效果，否则只能在2D空间变换），需要说明的是word-break:break-all;word-wrap:break-word;这两句

　　第五步，定义每个平面的div的CSS属性

　　第一个平面：

CSS Code复制内容到剪贴板

#page1{   
background-color: #10a6ce;   
line-height: 100px;   
}　　  

　　为了区分每个平面，显示出3D效果，这里需要将相邻的div进行不同背景色的设置，第一个div默认位于XY平面，不作变换

　　第二个平面：

CSS Code复制内容到剪贴板

#page2{   
           background-color: #0073b3;   
           -webkit-transform-origin:rightright;   
           -webkit-transform:rotateY(-90deg);   
           -moz-transform-origin:rightright;   
           -moz-transform:rotateY(-90deg);   
           line-height: 100px;   
       }  

　　这里使用transform-origin来定义该平面以哪个边开始进行变换，这里以最右边的边沿着Y轴绕行-90度，同样为了兼容加上了前缀

　　第三个平面：

C# Code复制内容到剪贴板

#page3{   
            background-color: #07beea;   
            -webkit-transform-origin:left;   
            -webkit-transform:rotateY(90deg);   
            -moz-transform-origin:left;   
            -moz-transform:rotateY(90deg);   
            line-height: 80px;   
        }  

　　第四个平面：

CSS Code复制内容到剪贴板

#page4{   
            background-color: #29B4F0;   
            -webkit-transform-origin:top;