首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

一款基于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.            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翻转特效的实例教程

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
CSS filter 有什么神奇用途
May 25 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
读取(1) 装饰器(1) 数据保存(1) bs4(1) 数组(5) 网页解析(1) 矩阵(1) translation(2) 查找算法(1) decorator(1)
You might like
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
javascript操作Cookie（设置、读取、删除）方法详解
2015/03/18 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
微信小程序实现授权登录
2019/05/15 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python 简易计算器程序，代码就几行
2009/08/29 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
Python简单生成随机数的方法示例
2018/03/31 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
巧克力领导品牌瑞士莲美国官网：Lindt Chocolate美国
2016/08/25 全球购物
Lucene推荐的分页方式是什么？
2015/12/07 面试题
关于青春的演讲稿三分钟
2014/08/22 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
复活读书笔记
2015/06/29 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL