摘要：簡單來說，就是非常對稱的立方體，而且每一個面都是由正多邊形組成，因此在這一篇，將會畫出正四面體正六面體。完成之后應(yīng)該就會順利地看到一個正六面體，這時候我們可以改變的，可以更加清楚。

我們理解了CSS 3D的個中原理之后，廢話就不用多說，直接來畫正多面體吧！只要正多面體可以畫出來，基本上在CSS 3D的領(lǐng)域里，大概就沒甚么難得倒我們了。

首先看一下百度百科對于正多面體的介紹：“多面體，或稱柏拉圖立體，指各面都是全等的正多邊形且每一個頂點所接的面數(shù)都是一樣的凸多面體?！焙唵蝸碚f，就是非常對稱的立方體，而且每一個面都是由正多邊形組成，因此在這一篇，將會畫出正四面體、正六面體。

要繪制正多面體，第一個一定要先畫正六面體，為什么呢？因為正六面體就是我們熟知的正立方體，夾角都是90度，也是最容易理解的形狀（就算有寫少許錯，好像還是畫得出來…）

首先我們要先在space里頭放入六個正方形，分別給予box1到box6的類別名稱識別，并寫上1到6來確定翻轉(zhuǎn)是否為正面朝外（朝內(nèi)的話文字就會是反過來的）。

    

        
1
        
2
        
3
        
4
        
5
        
6
    

接著對camera、space和這些box做基本的CSS定義，記得box的position要設(shè)為absolute，才不會互相擠壓。

.camera{
    width:200px;
    height:200px;
    perspective-origin:center center;
    -moz-perspective-origin:center center;
    -webkit-perspective-origin:center center;
    perspective:500px;
    -moz-perspective:500px;
    -webkit-perspective:500px;
}
.space{
    position:relative;
    width:100%;
    height:100%;
    border:1px dashed #000;
    transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
}
.space div{
    position:absolute;
    width:100px;
    height:100px;
    font-size:50px;
    text-align:center;
    line-height:100px;
}

完成后先來看box1，box1最簡單，只要將它位移到space的中間即可。

.box1{
    background:rgba(255,0,0,.2);
    transform:translateX(50px) translateY(50px);
}

box2除了移到中間，還必須要旋轉(zhuǎn)90度，這時候就要使用transform-origin的屬性，這可以設(shè)定物體作變化時要以自身的哪一點為主，設(shè)定不同的位置，旋轉(zhuǎn)90度之后就會在不同的位置，這里我們先把box2水平位移150px，然后把變換的X定位在左側(cè)，旋轉(zhuǎn)后就會可以順利地接在box1旁邊。

.box2{
    background:rgba(255,255,0,.2);
    transform-origin:left top;
    transform:translateX(150px) translateY(50px) rotateY(90deg);
}

box3剛好在box1的正對面，所以只要旋轉(zhuǎn)180度即可，但很重要的是旋轉(zhuǎn)之后整個Z軸會跟著旋轉(zhuǎn)180度，為了避免錯亂，先把box3往Z軸后面移動100px，旋轉(zhuǎn)后就會正常。

.box3{
    background:rgba(0,255,0,.2);
    transform:translateX(50px) translateY(50px) translateZ(-100px) rotateY(180deg);
}

box4和box2類似，不過要將旋轉(zhuǎn)的中心點移到右側(cè)，也因為移到右側(cè)的緣故，所以我們要先進行X的位移。

.box4{
    background:rgba(255,0,255,.2);
    transform-origin:right top;
    transform:translateX(-50px) translateY(50px) rotateY(-90deg);
}

box5在上方，box6在下方，用跟box1到box4同樣的方法，只是這次是要繞著X軸旋轉(zhuǎn)。

.box5{
    background:rgba(0,0,255,.2);
    transform-origin:center bottom;
    transform:translateX(50px) translateY(-50px) rotateX(90deg);
}
.box6{
    background:rgba(0,255,255,.2);
    transform-origin:center top;
    transform:translateX(50px) translateY(150px) rotateX(-90deg);
}

完成之后應(yīng)該就會順利地看到一個正六面體，這時候我們可以改變camera的perspective，可以更加清楚。

我們可以在space套用animate的效果，透過space的旋轉(zhuǎn)，仿佛就是一個正立方體在旋轉(zhuǎn)啰！

.space{
    position:relative;
    width:100%;
    height:100%;
    -webkit-transform-style:preserve-3d;
    -webkit-transform-origin:center center -50px;
    -webkit-animation:s 4s linear infinite;
}
@-webkit-keyframes s{
    0%{
        -webkit-transform:rotateY(0);
    }
    100%{
        -webkit-transform:rotateY(-359.9deg);
    }
}

理解正六面體之后，正四面體就比較好上手了，正四面體由四個正三角形組成，每個面之間的夾角為70.5度，所以待會旋轉(zhuǎn)的角度也就是70.5度。

首先看到HTML的結(jié)構(gòu)就是只有四個div而已。

camera和space的設(shè)定就不多談，直接看到這些box的屬性，別忘記要畫正三角形，就要用到邊框來繪制。

.space div{
  position:absolute;
  width:0;
  height:0;
  border-width:0 50px 87px;
  border-style:solid;
  opacity:.4;
}

首先看到box1，box1依舊是最簡單的（但也是比正方形的麻煩一點），這里我要用box1當(dāng)?shù)?，所以除了直接做位置的移動，移動后還要繞X軸旋轉(zhuǎn)90度，比較特別的是因為正三角形是由邊框構(gòu)成，所以顏色就是要改變border才可以。

.box1{
    border-color:transparent transparent #f00;
    transform-origin:center bottom;
    transform:translateX(50px) translateY(50px) rotateX(-90deg);
}

再來就是另外三個面了，box2跟box1差不多簡單，只是box1旋轉(zhuǎn)90度，box2要旋轉(zhuǎn)19.5度，因為box1要和box2有著70.5度的夾角。

.box2{
    border-color:transparent transparent #00f;
    transform-origin:center bottom;
    transform:translateX(50px) translateY(50px) rotateX(-19.5deg);
}

box3比較麻煩，我們要先讓box3繞著Y軸旋轉(zhuǎn)60度（因為正三角形每個角是60度），繞完之后，再繞X軸旋轉(zhuǎn)19.5度，為什么這里的19.5度是正值呢？因為我們繞Y軸旋轉(zhuǎn)后，X軸也跟著旋轉(zhuǎn)，所以繞X軸的方向就變成顛倒過來了。

.box3{
    border-color:transparent transparent #00f;
    transform-origin:right bottom;
    transform:translateX(50px) translateY(50px) rotateY(60deg) rotateX(19.5deg);
}

box4和box3類似，同樣的要先繞Y旋轉(zhuǎn)60度，這次是要繞負(fù)的，因為是另外一側(cè)。

.box4{
    border-color:transparent transparent #f0f;
    transform-origin:left bottom;
    transform:translateX(50px) translateY(50px) rotateY(-60deg) rotateX(19.5deg);
}

按照上面做，應(yīng)該就可以得到下圖的結(jié)果：

同樣的，把space加上動畫，就可以看到正四面體旋轉(zhuǎn)啰！比較不同的地方是中心點的位移為29px，為什么呢？因為要抓取正三角形的中心點，數(shù)學(xué)式為：tan（30deg）x 50 = 28.86。

.space{
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    -webkit-transform-origin:center center 29px;
    -webkit-animation:s 4s linear infinite;
}
@-webkit-keyframes s{
    0%{
        -webkit-transform:rotateY(0);
    }
    100%{
        -webkit-transform:rotateY(-359.9deg);
    }
}