在今天的課程中，我將向大家介紹如何使用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)"; ， 錯誤的）; 課程就講到這裡，接下來大家可以動手試試看。
