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


Posted in HTML / CSS onDecember 31, 2014

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.            overflowhidden;   
  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.            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的宽高相同,进行绝对定位,(只有绝对定位了,让其脱离文档流,才能够应用transform3D变换效果,否则只能在2D空间变换),需要说明的是word-break:break-all;word-wrap:break-word;这两句

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

第一个平面:

CSS Code复制内容到剪贴板
  1. #page1{   
  2. background-color#10a6ce;   
  3. line-height100px;   
  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-height100px;   
  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-height80px;   
  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-height50px;   
  8. }  

第六个平面:

CSS Code复制内容到剪贴板
  1. #page6{   
  2. background-color#10a6ce;   
  3. -webkit-transform:translateZ(-200px);   
  4. -moz-transform:translateZ(-200px);   
  5. line-height50px;   
  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.            width200px;   
  3.            height200px;   
  4.            positionrelative;   
  5.            -webkit-transform-style:preserve-3d;   
  6.            -moz-transform-style:preserve-3d;   
  7.            margin200px 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,动画变换的速度为匀速,立即开始执行动画并进行无限动画效果的循环。

HTML / CSS 相关文章推荐
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 #HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 #HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 #HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 #HTML / CSS
纯css3制作网站后台管理面板
Dec 30 #HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 #HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 #HTML / CSS
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
JavaScript自执行闭包的小例子
2013/06/29 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python实现k-means算法
2018/02/23 Python
wxPython的安装与使用教程
2018/08/31 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python 监测文件是否更新的方法
2019/06/10 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python实现序列化及csv文件读取
2020/01/19 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
大专生自荐信
2013/10/04 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
音乐学个人的自荐书范文
2013/11/26 职场文书
财务担保书范文
2014/04/02 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
八月迷情观后感
2015/06/11 职场文书
python绘制箱型图
2021/04/27 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技