css3 transform 3d 使用css3创建动态3d立方体(html5实践)


Posted in HTML / CSS onJanuary 06, 2013

在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。
demo地址:https://3water.com/jiaoben/70022.html
下面我们开始介绍如何制作。
html

复制代码
代码如下:

<div id="experiment">
<div id="cube">
<div class="face one">
One face
</div>
<div class="face two">
Up, down, left, right
</div>
<div class="face three">
Lorem ipsum.
</div>
<div class="face four">
New forms of navigation are fun.
</div>
<div class="face five">
Rotating 3D cube
</div>
<div class="face six">
More content
</div>
</div>
</div>

上面的html中,class为face的6个div分别代表立方体的6个面,使用one到six的class名字对他们加以区分。外部包含有id为cube和experiment的两层容器,这两层都是必须的,少了任何一个,3d效果都出不来。
其中experiment起到镜头的作用。对他设置焦距,这样3d效果才能在内部元素上展示出来。
perspective属性定义z轴平面的深度,同时也定义了平面上面和下面元素的相对尺寸。总的来说,perspective值越小,物体越大,离你也越近;perspective值越大,物体越小,离你也越远。大家可以通过http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查看效果。
perspective-origin属性定义视角的原点。
css
复制代码
代码如下:

#experiment {
-webkit-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
}

cube设置的属性中包含固定的宽度和高度,并将position设置为relative。固定的高度和宽度是必须的,这样cube中的元素才能在限定的区域内执行3d动画。如果将高度和宽度设置为100%,cube中的元素将在整个页面范围内运动。
transition用来设置动画相关的属性。transform-style: preserve-3d; 使得cube中的所有元素作为一个整体来产生3d效果。
大家可以浏览http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/,了解更多信息。
css:
复制代码
代码如下:

#cube {
position: relative;
margin: 100px auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-moz-transition: -moz-transform 2s linear;
-o-transition: -o-transform 2s linear;
transition: transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

接下来统一为立方体的6个面设置css属性。
css
复制代码
代码如下:

.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
}

接下来但是设置6个面的3d相关属性,使用rotateX或者rotateY来实现立方体表面朝向的翻转,使用translateZ实现立方体表面在3维空间的位置移动。
css
复制代码
代码如下:

#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
-o-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
-o-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
-o-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px);
-moz-transform: rotateX(-90deg) translateZ(200px);
-o-transform: rotateX(-90deg) translateZ(200px);
transform: rotateX(-90deg) translateZ(200px);
}

最后要做的是为页面绑定keydown事件,这样当你按下上下左右键的时候,实现立方体的翻转运动效果。
javascript:
复制代码
代码如下:

var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90;
break;
case 38: // up
xAngle += 90;
break;
case 39: // right
yAngle += 90;
break;
case 40: // down
xAngle -= 90;
break;
};
$('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
}, false);

课程就讲到这里,接下来大家可以动手尝试一下。
HTML / CSS 相关文章推荐
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 #HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 #HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 #HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 #HTML / CSS
html5的新玩法——语音搜索
Jan 03 #HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 #HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 #HTML / CSS
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
$()JS小技巧
2007/07/21 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python如何安装第三方模块
2020/05/28 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
法律专业自我鉴定
2013/10/03 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
便利店的创业计划书
2014/01/15 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
优秀班主任材料
2014/12/16 职场文书
小学四年级作文之写景
2019/08/23 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL