全国服务热线:4008-888-888

技术知识

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

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

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

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2. <div id="outer">  
  3.     <div id="group">  
  4.         <div class="page" id="page1">.</div>  
  5.         <div class="page" id="page2">..</div>  
  6.         <div class="page" id="page3">...</div>  
  7.         <div class="page" id="page4">....</div>  
  8.         <div class="page" id="page5">.....</div>  
  9.         <div class="page" id="page6">......</div>  
  10.   
  11.     </div>  
  12.   
  13. </div>  
  14. </body>  

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

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

CSS Code拷贝內容到剪贴板
  1. #outer{   
  2.            /*界定视距*/  
  3.            -webkit-perspective:500px;   
  4.            -WebKit-perspective-origin: 50% 50%;   
  5.   
  6.            -moz-perspective:500px;   
  7.            -moz-perspective-origin: 50% 50%;   
  8.   
  9.            overflowhidden;   
  10.        }  

  这里的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起,便于界定总体动漫实际效果,编码以下:

C# Code拷贝內容到剪贴板
  1. #group{   
  2.             width: 200px;   
  3.             height: 200px;   
  4.             position: relative;   
  5.             -webkit-transform-style:preserve⑶d;   
  6.   
  7.             -moz-transform-style:preserve⑶d;   
  8.             margin: 200px auto;   
  9.   
  10.         }  

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

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

CSS Code拷贝內容到剪贴板
  1. .page{   
  2.            width200px;   
  3.            height200px;   
  4.            positionabsolute;   
  5.            border-radius: 20px;   
  6.            text-aligncenter;   
  7.            font-weightbold;   
  8.            opacity: 0.5;   
  9.            overflowhidden;   
  10.            filter:alpha(opacity=50);   
  11.            font-size:150px;   
  12.            word-break:break-all;   
  13.            word-wrap:break-word;   
  14.        }  

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

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

  第1个平面:

CSS Code拷贝內容到剪贴板
  1. #page1{   
  2. background-color#10a6ce;   
  3. line-height100px;   
  4. }    

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

  第2个平面:

CSS Code拷贝內容到剪贴板
  1. #page2{   
  2.            background-color#0073b3;   
  3.            -webkit-transform-origin:rightright;   
  4.            -webkit-transform:rotateY(⑼0deg);   
  5.            -moz-transform-origin:rightright;   
  6.            -moz-transform:rotateY(⑼0deg);   
  7.            line-height100px;   
  8.        }  

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

  第3个平面:

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.         }  

  第4个平面:

CSS Code拷贝內容到剪贴板
  1. #page4{   
  2.             background-color#29B4F0;   
  3.             -webkit-transform-origin:top;   
  4.             -webkit-transform:rotateX(⑼0deg);   
  5.             -moz-transform-origin:top;   
  6.             -moz-transform:rotateX(⑼0deg);   
  7.             line-height80px;   
  8.         }  

  第5个平面:

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-height50px;   
  8. }  

  第6个平面:

CSS Code拷贝內容到剪贴板
  1. #page6{   
  2. background-color#10a6ce;   
  3. -webkit-transform:translateZ(-200px);   
  4. -moz-transform:translateZ(-200px);   
  5. line-height50px;   
  6. }  

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

CSS Code拷贝內容到剪贴板
  1. @-moz-keyframes scroll {   
  2.   
  3.            0% {   
  4.                -moz-transform:rotateY(0deg) rotateX(0deg) ;   
  5.   
  6.            }   
  7.   
  8.            50% {   
  9.                -moz-transform:rotateY(360deg) rotateX(0deg) ;   
  10.            }   
  11.   
  12.            100% {   
  13.                -moz-transform:rotateY(360deg) rotateX(360deg);   
  14.            }   
  15.   
  16.        }   
  17.   
  18.        @-webkit-keyframes scroll {   
  19.   
  20.            0% {   
  21.                -webkit-transform:rotateY(0deg) rotateX(0deg) ;   
  22.   
  23.            }   
  24.   
  25.            50% {   
  26.                -webkit-transform:rotateY(360deg) rotateX(0deg) ;   
  27.            }   
  28.   
  29.            100% {   
  30.                -webkit-transform:rotateY(360deg) rotateX(360deg);   
  31.            }   
  32.   
  33.                }  

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

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

CSS Code拷贝內容到剪贴板
  1. #group{   
  2.            width200px;   
  3.            height200px;   
  4.            positionrelative;   
  5.            -webkit-transform-style:preserve⑶d;   
  6.            -moz-transform-style:preserve⑶d;   
  7.            margin200px auto;   
  8.            -webkit-animation:scroll 8s linear 0s infinite;   
  9.            -moz-animation:scroll 8s linear 0s infinite;   
  10.        }  

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



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服