css3实现3D色子翻转特效


Posted in HTML / CSS onDecember 23, 2014

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

css3实现3D色子翻转特效

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

复制代码
代码如下:

<body>
<div id="outer">
<div id="group">
<div class="page" id="page1">.</div>
<div class="page" id="page2">..</div>
<div class="page" id="page3">...</div>
<div class="page" id="page4">....</div>
<div class="page" id="page5">.....</div>
<div class="page" id="page6">......</div>

</div>

</div>
</body>

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

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

复制代码
代码如下:

#outer{
/*定义视距*/
-webkit-perspective:500px;
-WebKit-perspective-origin: 50% 50%;

-moz-perspective:500px;
-moz-perspective-origin: 50% 50%;

overflow: hidden;
}

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

css3实现3D色子翻转特效

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

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

复制代码
代码如下:

#group{
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;
margin: 200px auto;

}

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

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

复制代码
代码如下:

.page{
width: 200px;
height: 200px;
position: absolute;
border-radius: 20px;
text-align: center;
font-weight: bold;
opacity: 0.5;
overflow: hidden;
filter:alpha(opacity=50);
font-size:150px;
word-break:break-all;
word-wrap:break-word;
}

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

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

第一个平面:

复制代码
代码如下:

#page1{
background-color: #10a6ce;
line-height: 100px;
}

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

第二个平面:

复制代码
代码如下:

#page2{
background-color: #0073b3;
-webkit-transform-origin:right;
-webkit-transform:rotateY(-90deg);
-moz-transform-origin:right;
-moz-transform:rotateY(-90deg);
line-height: 100px;
}

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

第三个平面:

复制代码
代码如下:

#page3{
background-color: #07beea;
-webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
-moz-transform-origin:left;
-moz-transform:rotateY(90deg);
line-height: 80px;
}

第三个平面:

复制代码
代码如下:

#page4{
background-color: #29B4F0;
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
-moz-transform-origin:top;
-moz-transform:rotateX(-90deg);
line-height: 80px;
}

第五个平面:

复制代码
代码如下:

#page5{
background-color: #6699cc;
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
-moz-transform-origin:bottom;
-moz-transform:rotateX(90deg);
line-height: 50px;
}

第六个平面:

复制代码
代码如下:

#page6{
background-color: #10a6ce;
-webkit-transform:translateZ(-200px);
-moz-transform:translateZ(-200px);
line-height: 50px;
}

这个第六个平面需要沿着Z轴进行其宽高长度的平移,已达到连接其他平面的目的

第六步,定义关键帧动画,代码如下:

复制代码
代码如下:

@-moz-keyframes scroll {
0% {
-moz-transform:rotateY(0deg) rotateX(0deg) ;
}
50% {
-moz-transform:rotateY(360deg) rotateX(0deg) ;
}
100% {
-moz-transform:rotateY(360deg) rotateX(360deg);
}
}
@-webkit-keyframes scroll {
0% {
-webkit-transform:rotateY(0deg) rotateX(0deg) ;
}
50% {
-webkit-transform:rotateY(360deg) rotateX(0deg) ;
}
100% {
-webkit-transform:rotateY(360deg) rotateX(360deg);
}
}

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

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

复制代码
代码如下:

#group{
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
margin: 200px auto;
-webkit-animation:scroll 8s linear 0s infinite;
-moz-animation:scroll 8s linear 0s infinite;
}

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

以上就是本文实现色子3d旋转的全部代码了,是不是很炫酷的3D旋转特效呢。。。

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 #HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 #HTML / CSS
css3选择器基本介绍
Dec 15 #HTML / CSS
css3的transition属性详解
Dec 15 #HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 #HTML / CSS
CSS3简单实现照片墙
Dec 12 #HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 #HTML / CSS
You might like
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
js常用函数 不错
2006/09/08 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
Python里隐藏的“禅”
2014/06/16 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
报表员工作失误检讨书范文
2014/09/19 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
颐和园的导游词
2015/01/30 职场文书
Python时间操作之pytz模块使用详解
2022/06/14 Python