使用css3創(chuàng)建動態(tài)3d立方體(html5實踐)

1、使用css3創(chuàng)建動態(tài)3d立方體(html5實踐)在今日的課程中，我將向大家介紹如何用法css3創(chuàng)建3d的立方體。大家可以通過下面的鏈接掃瞄實際效果，操作上下左右鍵，實現(xiàn)立方體的翻轉(zhuǎn)效果。下面我們開頭介紹如何制作。 復(fù)制代碼 代碼如下: one faceup, down, left, rightlorem ipsum.new forms of navigation are fun.rotating 3d cubemore content 上面的html中，class為face的6個div分離代表立方體的6個面，用法one到six的class名字對他們加以區(qū)別。外部包含有id為cube和exper

2、iment的兩層容器，這兩層都是必需的，少了任何一個，3d效果都出不來。其中experiment起到鏡頭的作用。對他設(shè)置焦距，這樣3d效果才干在內(nèi)部元素上展示出來。perspective屬性定義z軸平面的深度，同時也定義了平面上面和下面元素的相對尺寸?？偟膩碚f，perspective值越小，物體越大，離你也越近；perspective值越大，物體越小，離你也越遠(yuǎn)。大家可以通過/blog-files/3d-transforms/perspective-by-example.html查看效果。perspective-origin屬性定義視角的原點。css：

3、復(fù)制代碼 代碼如下: 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設(shè)置的屬性中包含固定的寬度和高度，并將position設(shè)置為relative。固定的高度和寬度是必需的，這

4、樣cube中的元素才干在限定的區(qū)域內(nèi)執(zhí)行3d動畫。假如將高度和寬度設(shè)置為100%，cube中的元素將在囫圇頁面范圍內(nèi)運動。transition用來設(shè)置動畫相關(guān)的屬性。transform-style: preserve-3d; 使得cube中的全部元素作為一個整體來產(chǎn)生3d效果。大家可以掃瞄css： 復(fù)制代碼 代碼如下: cube position: relative;margin: 100px auto;height: 400px;width: 400px;-webkit-transition: -webkit-transform 2s linear;-moz-transition: -moz

5、-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; 接下來統(tǒng)一為立方體的6個面設(shè)置css屬性。css： 復(fù)制代碼 代碼如下: .face position: absolute;height: 360px;

6、width: 360px;padding: 20px;background-color: rgba(50, 50, 50, 0.7); 接下來但是設(shè)置6個面的3d相關(guān)屬性，用法rotatex或者rotatey來實現(xiàn)立方體表面朝向的翻轉(zhuǎn)，用法translatez實現(xiàn)立方體表面在3維空間的位置移動。css： 復(fù)制代碼 代碼如下: cube .one -webkit-transform: rotatex(90deg) translatez(200px);-moz-transform: rotatex(90deg) translatez(200px);-o-transform: rotatex(90d

7、eg) 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(90de

8、g) 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)

9、 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-transf

10、orm: rotatex(-90deg) translatez(200px);-o-transform: rotatex(-90deg) translatez(200px);transform: rotatex(-90deg) translatez(200px); 最后要做的是為頁面綁定keydown大事，這樣當(dāng)你按下上下左右鍵的時候，實現(xiàn)立方體的翻轉(zhuǎn)運動效果。javascript： 復(fù)制代碼 代碼如下: var xangle = 0, yangle = 0;document.addeventlistener(&39;keydown&39;, function(e)switch(e.keycode)case 37: / leftyangle -= 90;break;case 38: / upxangle += 90;break;case 39: / rightyangle += 90;break;case 40: / downxangle -= 90;brea