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

互联网
西湖的风景是那样的雄伟壮观；湖水是那样清澈；是那样的平静，像一面镜子；湖边的景色是那样的美不胜收。

　　css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。

　　第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下：

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <divid="outer">
  3. <divid="group">
  4. <divclass="page"id="page1">.</div>
  5. <divclass="page"id="page2">..</div>
  6. <divclass="page"id="page3">...</div>
  7. <divclass="page"id="page4">....</div>
  8. <divclass="page"id="page5">.....</div>
  9. <divclass="page"id="page6">......</div>
  11. </div>
  13. </div>
  14. </body>

　　　在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D图形，此外定义一个class为group的div，用来盛放色子的六个平面，将它们组合在一起。最后再定义6个平行的div，表示色子的六个平面。

　　第二步，定义三维场景的css,代码如下：

CSS Code复制内容到剪贴板
  1. #outer{
  2. /*定义视距*/
  3. -webkit-perspective:500px;
  4. -WebKit-perspective-origin:50%50%;
  6. -moz-perspective:500px;
  7. -moz-perspective-origin:50%50%;
  9. overflow:hidden;
  10. }

　　这里的perspective表示的是透过这个三维场景看到里面的三维效果的距离，值越大看到的效果越远，值越小，看到的效果越近。perspective-origin表示的是相对于浏览器哪个角度去观察三维图形，第一个参数表示X轴方向，第二个参数表示Y轴方向，可以使用单位值px,也可以使用百分比。为了达到兼容ff和chrome的目的，所以给相应的CSS名称前加上moz和WebKit前缀。这里有必要说一下css3中的坐标定义，如下：

　　　

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

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

C# Code复制内容到剪贴板
  1. #group{
  2. width:200px;
  3. height:200px;
  4. position:relative;
  5. -webkit-transform-style:preserve-3d;
  7. -moz-transform-style:preserve-3d;
  8. margin:200pxauto;
  10. }

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

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

CSS Code复制内容到剪贴板
  1. .page{
  2. width:200px;
  3. height:200px;
  4. position:absolute;
  5. border-radius:20px;
  6. text-align:center;
  7. font-weight:bold;
  8. opacity:0.5;
  9. overflow:hidden;
  10. filter:alpha(opacity=50);
  11. font-size:150px;
  12. word-break:break-all;
  13. word-wrap:break-word;
  14. }

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

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

　　第一个平面：

CSS Code复制内容到剪贴板
  1. #page1{
  2. background-color:#10a6ce;
  3. line-height:100px;
  4. }　　

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

　　第二个平面：

CSS Code复制内容到剪贴板
  1. #page2{
  2. background-color:#0073b3;
  3. -webkit-transform-origin:rightright;
  4. -webkit-transform:rotateY(-90deg);
  5. -moz-transform-origin:rightright;
  6. -moz-transform:rotateY(-90deg);
  7. line-height:100px;
  8. }

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

　　第三个平面：

C# Code复制内容到剪贴板
  1. #page3{
  2. background-color:#07beea;
  3. -webkit-transform-origin:left;
  4. -webkit-transform:rotateY(90deg);
  5. -moz-transform-origin:left;
  6. -moz-transform:rotateY(90deg);
  7. line-height:80px;
  8. }

　　第四个平面：

CSS Code复制内容到剪贴板
  1. #page4{
  2. background-color:#29B4F0;
  3. -webkit-transform-origin:top;
  4. -webkit-transform:rotateX(-90deg);
  5. -moz-transform-origin:top;
  6. -moz-transform:rotateX(-90deg);
  7. line-height:80px;
  8. }

　　第五个平面：

CSS Code复制内容到剪贴板
  1. #page5{
  2. background-color:#6699cc;
  3. -webkit-transform-origin:bottombottom;
  4. -webkit-transform:rotateX(90deg);
  5. -moz-transform-origin:bottombottom;
  6. -moz-transform:rotateX(90deg);
  7. line-height:50px;
  8. }

　　第六个平面：

CSS Code复制内容到剪贴板
  1. #page6{
  2. background-color:#10a6ce;
  3. -webkit-transform:translateZ(-200px);
  4. -moz-transform:translateZ(-200px);
  5. line-height:50px;
  6. }

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

CSS Code复制内容到剪贴板
  1. @-moz-keyframesscroll{
  3. 0%{
  4. -moz-transform:rotateY(0deg)rotateX(0deg);
  6. }
  8. 50%{
  9. -moz-transform:rotateY(360deg)rotateX(0deg);
  10. }
  12. 100%{
  13. -moz-transform:rotateY(360deg)rotateX(360deg);
  14. }
  16. }
  18. @-webkit-keyframesscroll{
  20. 0%{
  21. -webkit-transform:rotateY(0deg)rotateX(0deg);
  23. }
  25. 50%{
  26. -webkit-transform:rotateY(360deg)rotateX(0deg);
  27. }
  29. 100%{
  30. -webkit-transform:rotateY(360deg)rotateX(360deg);
  31. }
  33. }

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

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

CSS Code复制内容到剪贴板
  1. #group{
  2. width:200px;
  3. height:200px;
  4. position:relative;
  5. -webkit-transform-style:preserve-3d;
  6. -moz-transform-style:preserve-3d;
  7. margin:200pxauto;
  8. -webkit-animation:scroll8slinear0sinfinite;
  9. -moz-animation:scroll8slinear0sinfinite;
  10. }

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

到此这篇关于一款基于css3麻将筛子3D翻转特效的实例好代码教程就介绍到这了。人最大的罪过——无知！更多相关一款基于css3麻将筛子3D翻转特效的实例好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！