如何利用CSS3的3D效果制作正方體

這篇文章將為大家詳細(xì)講解有關(guān)如何利用CSS3的3D效果制作正方體，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

學(xué)會用CSS3的3D效果制作一個(gè)正方體，有助于增強(qiáng)我們對3D場景的旋轉(zhuǎn)和位移屬性的理解。下面的動態(tài)圖就是利用3D旋轉(zhuǎn)位移，結(jié)合動畫效果制作的。

進(jìn)入主題，以下是使用3D多重變換制作一個(gè)正方體的過程。
在此之前需要明白的是，正方體中各個(gè)面的的x,y,z坐標(biāo)軸是以各自面的中心點(diǎn)展開的，也就是說對某個(gè)面進(jìn)行3D變換，就要以某個(gè)面為坐標(biāo)軸基準(zhǔn)。若是要對正方體整體進(jìn)行變換，就需要找到父元素的原始位置，上圖中為紫色透明的平面。

1.正方體是由6個(gè)面通過旋轉(zhuǎn)位置構(gòu)成的，因此我們先要構(gòu)建6個(gè)面，并設(shè)置其屬性值和3D屬性，這里我使用ul和li的組合來構(gòu)建，當(dāng)然也可以使用其它的塊狀元素構(gòu)建。

CSS樣式..........

*{margin:0;padding: 0;}
   li{list-style: none;}
   html,body{height: 100%;}
   body{perspective: auto;}/*設(shè)置3D景深*/
   .box1{
    width:200px;
    height:200px;
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;margin: auto;/*使ul在屏幕正中的位置*/
    background: rgba(244,4,253,0.3);/*給ul一個(gè)紫色透明的背景*/
    transform-style:preserve-3d;/*定義ul的樣式為3D屬性*/
    animation: box 10s 0.3s linear infinite;
    }
   li{
    width: 200px;
    height: 200px;
    position: absolute;left: 0;top: 0;/*使6個(gè)li在屏幕正中位置的互相重疊*/
    font:50px/200px "微軟雅黑";
    color: white;
    text-align: center;
    } 
   ul{
   transform: rotateY(20deg) rotateX(20deg)；/*讓ul旋轉(zhuǎn)一定的角度，方便觀察各個(gè)面的變換效果*/
   }
html...............
<ul class="box1">
    <li>前</li>
    <li>后</li>
    <li>左</li>
    <li>右</li>
    <li>上</li>
    <li>下</li>  
</ul>

上圖就是6個(gè)li中間的文字互相重疊的效果，也是li的初始位置，我們將在此基礎(chǔ)上進(jìn)行3D變換。

2.為了方便對整個(gè)正方體進(jìn)行3D變換，一般我們以ul（父元素）的初始位置為變換的起點(diǎn)，需要注意的是，transform: translateZ(-100px) rotateY(180deg);和transform: rotateY(180deg) translateZ(-100px);兩者的效果是不一樣的，要根據(jù)實(shí)際情況進(jìn)行合適的變換。

在上面的CSS代碼下添加如下代碼：

   li:nth-child(1){
    background: #ff0;
    transform: translateZ(100px);
   }
   li:nth-child(2){
    background: #330;
    transform: translateZ(-100px) rotateY(180deg);
   }
   li:nth-child(3){
    background: #f00;
    transform: translateX(-100px) rotateY(-90deg);
   }
   li:nth-child(4){
    background: #0f0;
    transform: translateX(100px) rotateY(90deg);
   }
   li:nth-child(5){
    background: #0ff;
    transform: translateY(-100px) rotateX(90deg);
   }
   li:nth-child(6){
    background: #00f;
    transform: translateY(100px) rotateX(-90deg);
   }

上面的代碼中，用的是先位移再旋轉(zhuǎn)的方式，也可以對li:nth-child(3)使用先旋轉(zhuǎn)再位移的方法，代碼就需要改為transform: rotateY(-90deg) translateZ(100px);位移的坐標(biāo)軸變成了Z軸，這是因?yàn)樾D(zhuǎn)之后，li:nth-child(3)的朝向發(fā)生了改變，正方體的左邊由原來的X軸方向變成了Z軸方向。

以上就是CSS3制作正方體效果的一種方式，還可以在代碼中添加hover（懸?。nimation（動畫）、transtion（過渡）等效果，增加代碼的趣味性。只要理解了3D多重變換的使用方法，還能使用多種方法實(shí)現(xiàn)正方體的效果。

關(guān)于“如何利用CSS3的3D效果制作正方體”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。