摘要：正八面體與正十二面體，這兩個正多面體雖然組合的面比較多，不過因為具備了對稱性，所以只需要制作出一半的結構，另外一半再用反轉的方式接在一起即可。同樣的，旋轉讓整個正八面體旋轉，看起來更有立體感。

正八面體與正十二面體，這兩個正多面體雖然組合的面比較多，不過因為具備了對稱性，所以只需要制作出一半的結構，另外一半再用反轉的方式接在一起即可。

正八面體可以想像成“兩個金字塔”疊合在一起，為了方便我們后續作整個金字塔旋轉的動作，我們要用另外一個容器來把金字塔包裝起來，可以想像成把金字塔的四個面變成一個群組，就可以針對這個群組做變形或移動，HTML的結構如下，space里面有box1和box2，box1是上半部的金字塔，box2是下半部的金字塔：

再來同樣先針對camera和space做設定。

.camera{
    width:200px;
    height:200px;
    -webkit-perspective-origin:50% 50%;
    -webkit-perspective:500px;
}
.space{
    position:relative;
    width:100%;
    height:100%;
    border:1px dashed #000;
    -webkit-transform-style:preserve-3d;
}

然后因為我們用到的面face都是三角形，同樣要用border來達成，記得position要設定為absolute，并且由于box1，box2本身內部也是立體空間，所以同樣要加上transform-style: preserve-3d的屬性。

.space div{
    position:absolute;
}
.box1, .box2{
    transform-style:preserve-3d;
}
.box1 div,.box2 div{
  width:0;
  height:0;
  border-width:0 50px 87px;
  border-style:solid;
  opacity:.4;
}

再來制作box1的金字塔造型，由于正八面體每個面夾角為109.28度，又因為分為上兩半，從中間差開，一半為54.64度，因此我們要旋轉的角度是：90 - 54.64 = 35.36，所以待會我們要旋轉的角度就以此為主，先看到face1，順著x軸往內轉35.36度。

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

face2則要先以右邊為圓心，繞Y軸旋轉90度，之后再繞X軸旋轉35.36度。

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

face3在face1的對面，所以先在Z軸移動100px，接著再繞X軸旋轉35.36度。

.face3{
    border-color:transparent transparent #0f0;
    transform-origin:left bottom;
    transform:translateX(50px) translateY(50px)  translateZ(-100px) rotateX(-35.36deg);
}

face4跟face2雷同，只是face4用左側為圓心。

.face4{
    border-color:transparent transparent #f90;
    transform-origin:left bottom;
    transform:translateX(50px) translateY(50px) rotateY(90deg) rotateX(-35.36deg);
}

基本上到這邊，已經完成了上半部box1的金字塔造型，這時后的box1與box2是重疊的，我們只要將box2反轉并改變位置，就可以變成一個正八面體的造型，但這里會遇到一個很有意思的問題，box2變形的中心點在哪里？這時候就必須用到好幾次的三角函數計算，因為是一個金子塔造型旋轉的中心點，所以就要把Z軸考察進去，首先看到X軸設定為center是沒問題的，Z軸因為金子塔的底部是100 x 100的正方形，所以中心點在50px的位置也很正常，但Y軸就比較麻煩，首先我們看到正三角形的一個邊長為100px，中線的長度就是sin（60）x 100 = 86.6左右，再來用sin（54.64）x 86.6就得到金子塔的高度70.6，四舍五入一下就得到了71，因此當我們將變形中心設定在這邊，旋轉的時候就會繞著金子塔頂旋轉，旋轉180度之后，就要利用translateY來歸位，要移動的距離約為100 + 71/2 = 135左右，但因為從一開始我們就都是用四舍五入的方式進行，難免最后用整數表現會有誤差（兩個金字塔接不起來），這時就必須要用手動微調，這里設定為-132px即可。

.box2{
      transform-origin: center 71px -50px;
      transform: rotateX(180deg) translateY(-132px);
}

同樣的，旋轉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);
    }
}

會作正八面體之后，正十二面體差不多也是同樣的原理，只是正十二面體更加復雜，因為它是由十二個正五邊形組成，不過這里要從正五邊形的五個邊去長出五個面，每個面的夾角為116.56度，180 - 116.56 = 63.44，待會用到的角度大概不會脫離這兩個數值，當然因為有很多小數點，所以屆時還是必須手動微調（因為像素最小單位是1）。

HTML的結構如下，也是分成兩塊，內容各有六個面。

先設定一開始的CSS。

.camera{
    width:200px;
    height:200px;
    perspective-origin:50% 0%;
    -moz-perspective-origin:50% 0%;
    -webkit-perspective-origin:50% 0%;
    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;
}
.box1, .box2{
    transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
}

再來是慢慢的畫每個面，首先是畫出所有的正五邊形。

.box1 div,.box2 div{
  width:162px;
  height:154px;
  opacity:.9;
}
.box1 div:before,.box2 div:before{
  position:absolute;
  content:"";
  top:0;
  width:0;
  height:0;
  border-width:0 81px 59px;
  border-style:solid;
  border-color:transparent transparent #069;
}
.box1 div:after,.box2 div:after{
  position:absolute;
  content:"";
  top:59px;
  left:0;
  width:100px;
  height:0;
  background:none;
  border-width:95px 31px 0;
  border-style:solid;   
  border-color:#069 transparent transparent;
}

因為是要由正五邊形的五個邊往外長五個面，所以face1就不做更動，屆時再讓box做旋轉即可，而face2到face6這五個面，比較簡單的做法就是直接先做Z軸旋轉的動作，然后再進行Y軸旋轉，再把各個面translate到對應的位置，不過這里要非常注意，因為我們先進行了Z軸與Y軸的旋轉，所以各個面的坐標系統已經改變，可以參照下圖，就可以明白該如何translate，基本上就是在Y軸旋轉了-116.56度之后，各個面先朝向自己的Y軸移動69px，然后為了讓各個邊貼齊，必須要再往Y軸移動31px（cos（180-116.56）x 69），往Z軸移動62px（sin（180-116.56）x 69）。

因此face2到face6就可以幾乎用完全一樣的方式寫出來（Z軸旋轉角度每個面差72度）

.face2{  
    transform-origin:81px 85px 0;
        transform:rotateZ(0) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face3{  
        transform-origin:81px 85px 0;
        transform:rotateZ(72deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face3{  
        transform-origin:81px 85px 0;
        transform:rotateZ(72deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face4{
        transform-origin:81px 85px 0;
        transform:rotateZ(144deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face5{  
      transform-origin:81px 85px 0;
      transform:rotateZ(-144deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face6{  
        transform-origin:81px 85px 0;
      transform:rotateZ(-72deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}

為了讓每個面不同顏色，這里必須要改變偽元素的border色彩。

.box1 .face2:before{
  border-color:transparent transparent #f00;
}
.box1 .face2:after{
  border-color:#f00 transparent transparent;
}
.box1 .face3:before{
  border-color:transparent transparent #0f0;
}
.box1 .face3:after{
  border-color:#0f0 transparent transparent;
}
.box1 .face4:before{
  border-color:transparent transparent #f90;
}
.box1 .face4:after{
  border-color:#f90 transparent transparent;
}
.box1 .face5:before{
  border-color:transparent transparent #09f;
}
.box1 .face5:after{
  border-color:#09f transparent transparent;
}
.box1 .face6:before{
  border-color:transparent transparent #f0f;
}
.box1 .face6:after{
  border-color:#f0f transparent transparent;
}

最后就針對box1與box2做旋轉的動作，這里比較需要注意的是translateZ，整個正五邊形的高度為276（sin（63.44）x 154 x 2），但位移的時候并非完全是這個高度，必須扣掉接合處短邊的高度，因此會變成223（276 - sin（36）x 100）

.box1{
    transform-origin:81px 85px 0;
    transform:rotateX(90deg) translateZ(-223px);
}
.box2{
    transform-origin:81px 85px 0;
    transform:rotateX(-90deg);
}

space加上動畫效果，驗證一下每個面是否都有接合的完美。

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