文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用css3实现麻将筛子3D翻转特效

2024-04-02 19:55

关注

这篇文章主要介绍“怎么用css3实现麻将筛子3D翻转特效”,在日常操作中,相信很多人在怎么用css3实现麻将筛子3D翻转特效问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用css3实现麻将筛子3D翻转特效”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

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

怎么用css3实现麻将筛子3D翻转特效

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

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中定义一个叫做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%;   

  5.   

  6.            -moz-perspective:500px;   

  7.            -moz-perspective-origin: 50% 50%;   

  8.   

  9.            overflow: hidden;   

  10.        }  

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

怎么用css3实现麻将筛子3D翻转特效

  在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;   

  6.   

  7.             -moz-transform-style:preserve-3d;   

  8.             margin: 200px auto;   

  9.   

  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-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度旋转,这样完成一次动画效果,同样为了兼容,给关键帧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: 200px auto;   

  8.            -webkit-animation:scroll 8s linear 0s infinite;   

  9.            -moz-animation:scroll 8s linear 0s infinite;   

  10.        }  

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

到此,关于“怎么用css3实现麻将筛子3D翻转特效”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯