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/