玩转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);
    }
}