1款根据css3麻将筛子三d旋转殊效的案例实例教程

　　css3使大家可以跳出来2d室内空间，完成3维室内空间的动漫实际效果，这里得出1个全自动旋转的3d色子动漫实际效果制做全过程。

　　第1步，最先开展HTML的合理布局，针对三d实际效果，合理布局有1定的规律性，编码以下：

　　　在body中界定1个叫做outer的div，它是最外层的div，用来出示1个三d情景，能够觉得它是1个三d图型的展现服务平台，仅有界定了这样1个div，才可以够展现三d图型，另外界定1个class为group的div，用来盛装色子的6个平面，将它们组成在1起。最终再界定6个平行的div，表明色子的6个平面。

　　第2步，界定3维情景的css,编码以下：

　　这里的perspective表明的是透过这个3维情景看到里边的3维实际效果的间距，值越大看到的实际效果越远，值越小，看到的实际效果越近。perspective-origin表明的是相对访问器哪一个角度去观查3维图型，第1个主要参数表明X轴方位，第2个主要参数表明Y轴方位，可使用企业值px,还可以应用百分比。以便做到适配ff和chrome的目地，因此给相应的CSS名字前再加moz和WebKit前缀。这里必须说1下css3中的座标界定，以下：

　　　

　　在css3中，X轴正方位向右，Y轴正方位向下，Z轴正方位由显示屏内伸向显示屏外，这和立体式几何图形中的座标系界定不一样。

　　第3步，为id为group的div设定css特性，这个div关键是将色子的6个平面组成在1起，便于界定总体动漫实际效果，编码以下：

　　　　这里界定了该div的宽高，并界定其position为relative，便于在其中的6个平面相对这个div开展肯定精准定位，另外transform-style:preserve⑶d这个特性告知访问器，全部transform转换全是在三d室内空间中的转换，而并不是在2D室内空间中，一样以便适配再加了前缀。

　　第4步，界定每一个平面div的通用性page特性，即每一个色子平面相互的CSS特性，编码以下：

　　这里界定了每一个平面的宽高和其父div group的宽高同样，开展肯定精准定位，（仅有肯定精准定位了，让其摆脱文本文档流，才可以够运用transform三d转换实际效果，不然只能在2D室内空间转换），必须表明的是word-break:break-all;word-wrap:break-word;这两句

　　第5步，界定每一个平面的div的CSS特性

　　第1个平面：

　　以便区别每一个平面，显示信息出三d实际效果，这里必须将邻近的div开展不一样情况色的设定，第1个div默认设置坐落于XY平面，不作转换

　　第2个平面：

　　这里应用transform-origin来界定该平面以哪一个边刚开始开展转换，这里以最右侧的边缘着Y轴绕行⑼0度，一样以便适配再加了前缀

　　第3个平面：

　　第4个平面：

　　第5个平面：

　　第6个平面：

　　这个第6个平面必须沿着Z轴开展其宽高长度的平移，已做到联接别的平面的目地第6步，界定重要帧动漫，编码以下：

　　这里的动漫分成两个环节，从0%到50%，该色子沿着Y轴开展360度转动，从50%到100%的時间内，沿着X轴再开展360度转动，这样进行1次动漫实际效果，一样以便适配，给重要帧keyframes前面再加了前缀

　　第7步，在id为group的div中应用CSS启用前面界定的重要帧动漫，这里因为必须改色子6个平面另外产生转换，因此必须在6个平面的父div上启用动漫.

　　在第3步的結果上再加了animation:scroll 8s linear 0s infinite;CSS特性，表明启用名为scroll的动漫，1次动漫进行時间为8s,动漫转换的速率为匀速，马上刚开始实行动漫并开展无尽动漫实际效果的循环系统。