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 相关文章推荐
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
纯html+css实现Element loading效果
Aug 02 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
document对象execCommand的command参数介绍
2006/08/01 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
详解Python中find()方法的使用
2015/05/18 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
浅谈Python type的使用
2019/11/19 Python
python实现udp聊天窗口
2020/03/31 Python
python实现程序重启和系统重启方式
2020/04/16 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python 求向量的余弦值操作
2021/03/04 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
黄河的主人教学反思
2014/02/07 职场文书
毕业实习评语
2014/02/10 职场文书
保证书范文大全
2014/04/28 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
土地租赁协议书
2015/01/29 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle