css3 transform 3d 使用css3建立動態3d立方體(html5實作)_html5教學技巧

在今天的課程中，我將向大家介紹如何使用css3建立3d的立方體。大家可以透過下面的連結瀏覽實際效果，操作上下左右鍵，實現立方體的翻轉效果。
demo網址：http://www.jb51.net/jiaoben/70022.html
下面我們開始介紹如何製作。
html：

複製程式碼

代碼🎜>

One face

Up, down, left, right

Lorem ipsum.

New forms of navigation are fun.

Rotating 3D cube

More content

上面的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

origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200p>; 🎜>

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：

複製程式碼


程式碼如下:

程式碼如下:

程式碼如下:

程式碼如下:



程式碼如下:



程式碼如下：
position: relative;
margin: 100px auto;
height: 400px;
width: 400px;
-webkit-transtinition: -webkit-transform 2s ​​i; : -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.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）；
變換：rotateX（90deg）translateZ（200p）translate）； >}
#cube .two {
-webkit-transform：translateZ(200px);
-moz-transform：translateZ(200px);
-o-transform：translateZ(200px);
變換：translateZ(200px);
}
#cube 。三個{
-webkit-transform：rotateY（90deg）translateZ（200px）;
-moz-transform:rotateY（90deg）translateZ（200px）；
-o-transform：rotateY（90deg）translateZ（200px）；
變換：rotateY（90deg）translateZ (200px)； >}
#cube .four {
-webkit-transform：rotateY（180deg）translateZ（200px）;
-moz-transform:rotateY（180deg）translateZ（200px）；
-o-transform：rotateY（180deg）translateZ（200px）；
變換：rotateY（180deg）translateZ（180deg）（180deg））； >}
#cube .五個 {
-webkit-transform：rotateY（-90deg）translateZ（200px）;
-moz-transform:rotateY（-90deg）translateZ（200px）；
-o-transform：rotateY（-90deg）translateZ（200px）；
轉換：rotateY（-90deg）translateZ（-90deg）translateZ（20deg）（-90deg））（ ;
}
#cube .six {
-webkit-transform：rotateX（-90deg）translateZ（200px）;
-moz-transform:rotateX（-90deg）translateZ（200px）；
-o-transform：rotateX（-90deg）translateZ（200px）；
變換：rotateX（-90deg）transZlateZ（200plateZ（-90deg）transZ）（200plateZ（-90deg））200plateZ（200plateZ）（200plateZ）轉換）； ;
}


最後要做的是為頁面綁定keydown事件，這樣當你按下左右上下鍵的時候，實現立方體的空中運動效果。 🎜 >

複製程式碼

程式碼如下： var xAngle = 代碼如下：

var xAngle = 0, yAngle = 0;

document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90; 🎜>break;
case 38: // 向上
xAngle = 90;
break;
case 39: // 往右
yAngle = 90: // 繼續
xAngle - = 90;
break
};$('cube').style.webkitTransform = "rotateX(" xAngle "deg)rotateY(" yAngle " deg)"; ， 錯誤的）;


課程就講到這裡，接下來大家可以動手試試看。