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

推荐：html5指南-6.如何创建离线web应用程序实现离线访问
今天我们的内容是关于如何创建离线web应用，他的好处是可以让浏览器下载我们指定的web资源，这样用户在离线状态下也能正常使用我们的站点

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

复制代码代码如下:www.mb5u.com

<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：

复制代码代码如下:www.mb5u.com

 
#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/">css3-3d-transform-perspective-animate-transition/，了解更多信息。
css：

复制代码代码如下:www.mb5u.com

 
#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：

复制代码代码如下:www.mb5u.com

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

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

复制代码代码如下:www.mb5u.com

 
#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：

复制代码代码如下:www.mb5u.com

 
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); 

课程就讲到这里，接下来大家可以动手尝试一下。

分享：html5 Canvas画图教程(1)—画图的基本常识
Canvas，意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以，把他看成一块实实在在的画布可以加快理解;如果你想学习Canvas画图，你必须要有Javascript基础,不多说了，切入正题

来源：未知/所属分类：HTML5教程/更新时间：2013-04-22

[收藏][报错][返回列表]

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

HTML5教程Rss订阅Div+Css教程搜索

HTML5教程推荐

猜你也喜欢看这些