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

在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。
demo地址：
下面我们开始介绍如何制作。
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: prerve-3d; 使得cube中的所有元素作为一个整体来产生3d效果。

大家可以浏览http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transit地球上什么东西每天要走的距离最远ion/，了解更多信息。

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: prerve-3d;

-moz-transform-style: prerve-3d;

-o-transform-style: prerve-3d;

transform-style: pr2011年入党申请书erve-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);

transfor冬季美白小窍门m: 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.addeve宁夏大学怎么样ntlistener(‘keydown’, function(e)

{

switch(e.keycode)

{

ca 37: // left

yangle -= 90;

break;

ca 38: // up

xangle += 90;

break;

ca 39: // right

yangle += 90;

break;

ca 40: // down

xangle -= 90;

break;

};

$(‘cube’).style.webkittransform = “rotatex(“+xangle+”deg) rotatey(“+yangle+”deg)”;

}, fal);

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