css3 transform 3d 使用css3創建動態3d立方體(html5實踐)

2024-08-26 00:15:05

字體：大中小

來源：轉載

供稿：網友

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

復制代碼代碼如下:www.CuoXIn.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軸平面的深度，同時也定義了平面上面和下面元素的相對尺寸?？偟膩碚f，perspective值越小，物體越大，離你也越近；perspective值越大，物體越小，離你也越遠。大家可以通過http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查看效果。
perspective-origin屬性定義視角的原點。
css：

復制代碼代碼如下:www.CuoXIn.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.CuoXIn.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.CuoXIn.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.CuoXIn.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.CuoXIn.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); 