HTML5实践 -- 使用css3创建动态3d立方体

　　在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。

　　demo地址：http://www.paulrhayes.com/experiments/cube-3d/

　　demo下载地址：animated-css3-cube.zip

 

　　下面我们开始介绍如何制作。

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

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

 

　　原文地址：http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/