這篇文章將為大家詳細(xì)講解有關(guān)如何使用css3創(chuàng)建動(dòng)態(tài)3d立方體，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

按需開發(fā)可以根據(jù)自己的需求進(jìn)行定制，網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)構(gòu)思過(guò)程中功能建設(shè)理應(yīng)排到主要部位公司網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

 代碼如下:

<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個(gè)div分別代表立方體的6個(gè)面，使用one到six的class名字對(duì)他們加以區(qū)分。外部包含有id為cube和experiment的兩層容器，這兩層都是必須的，少了任何一個(gè)，3d效果都出不來(lái)。

其中experiment起到鏡頭的作用。對(duì)他設(shè)置焦距，這樣3d效果才能在內(nèi)部元素上展示出來(lái)。

perspective屬性定義z軸平面的深度，同時(shí)也定義了平面上面和下面元素的相對(duì)尺寸?？偟膩?lái)說(shuō)，perspective值越小，物體越大，離你也越近；perspective值越大，物體越小，離你也越遠(yuǎn)。大家可以通過(guò)http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查看效果。

perspective-origin屬性定義視角的原點(diǎn)。

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設(shè)置的屬性中包含固定的寬度和高度，并將position設(shè)置為relative。固定的高度和寬度是必須的，這樣cube中的元素才能在限定的區(qū)域內(nèi)執(zhí)行3d動(dòng)畫。如果將高度和寬度設(shè)置為100%，cube中的元素將在整個(gè)頁(yè)面范圍內(nèi)運(yùn)動(dòng)。

transition用來(lái)設(shè)置動(dòng)畫相關(guān)的屬性。transform-style: preserve-3d; 使得cube中的所有元素作為一個(gè)整體來(lái)產(chǎn)生3d效果。

大家可以瀏覽http://www.zhangxinxu.com/wordpress/2012/09/CSS3/">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;

}

接下來(lái)統(tǒng)一為立方體的6個(gè)面設(shè)置css屬性。

css：

.face {

position: absolute;

height: 360px;

width: 360px;

padding: 20px;

background-color: rgba(50, 50, 50, 0.7);

}

接下來(lái)但是設(shè)置6個(gè)面的3d相關(guān)屬性，使用rotateX或者rotateY來(lái)實(shí)現(xiàn)立方體表面朝向的翻轉(zhuǎn)，使用translateZ實(shí)現(xiàn)立方體表面在3維空間的位置移動(dòng)。

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);

}

最后要做的是為頁(yè)面綁定keydown事件，這樣當(dāng)你按下上下左右鍵的時(shí)候，實(shí)現(xiàn)立方體的翻轉(zhuǎn)運(yùn)動(dòng)效果。

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);

關(guān)于“如何使用css3創(chuàng)建動(dòng)態(tài)3d立方體”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章標(biāo)題：如何使用css3創(chuàng)建動(dòng)態(tài)3d立方體
當(dāng)前鏈接：http://www.rwnh.cn/article22/jscscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、企業(yè)建站、做網(wǎng)站、動(dòng)態(tài)網(wǎng)站、云服務(wù)器、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)