玩轉CSS 3D -正四面體與正六面體

我們理解了CSS 3D的箇中原理之後，廢話就不用多說，直接來畫正多面體吧！只要正多面體可以畫出來，基本上在CSS 3D的領域裡，大概就沒甚麼難得倒我們了。

首先看一下百度百科對於正多面體的介紹：“多面體，或稱柏拉圖立體，指各面都是全等的正多邊形且每一個頂點所接的面數都是一樣的凸多面體。”簡單來說，就是非常對稱的立方體，而且每一個面都是由正多邊形組成，因此在這一篇，將會畫出正四面體、正六面體。

正六面體

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

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

<div class="camera">
    <div class="space">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
    </div>
</div>複製程式碼

接著對camera、space和這些box做基本的CSS定義，記得box的position要設為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除了移到中間，還必須要旋轉90度，這時候就要使用transform-origin的屬性，這可以設定物體作變化時要以自身的哪一點為主，設定不同的位置，旋轉90度之後就會在不同的位置，這裡我們先把box2水平位移150px，然後把變換的X定位在左側，旋轉後就會可以順利地接在box1旁邊。

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

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

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

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

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

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

.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);
}複製程式碼

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

我們可以在space套用animate的效果，透過space的旋轉，彷彿就是一個正立方體在旋轉囉！

.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度，所以待會旋轉的角度也就是70.5度。

首先看到HTML的結構就是隻有四個div而已。

<div class="camera">
    <div class="space">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</div>複製程式碼

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

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

首先看到box1，box1依舊是最簡單的（但也是比正方形的麻煩一點），這裡我要用box1當底，所以除了直接做位置的移動，移動後還要繞X軸旋轉90度，比較特別的是因為正三角形是由邊框構成，所以顏色就是要改變border才可以。

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

再來就是另外三個面了，box2跟box1差不多簡單，只是box1旋轉90度，box2要旋轉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軸旋轉60度（因為正三角形每個角是60度），繞完之後，再繞X軸旋轉19.5度，為什麼這裡的19.5度是正值呢？因為我們繞Y軸旋轉後，X軸也跟著旋轉，所以繞X軸的方向就變成顛倒過來了。

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

box4和box3類似，同樣的要先繞Y旋轉60度，這次是要繞負的，因為是另外一側。

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

按照上面做，應該就可以得到下圖的結果：

同樣的，把space加上動畫，就可以看到正四面體旋轉囉！比較不同的地方是中心點的位移為29px，為什麼呢？因為要抓取正三角形的中心點，數學式為：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);
    }
}複製程式碼