CSS實現3D效果：立方體

最終效果以下

首先要給3D的元素準備一個「舞臺」，由於頁面自己是平面的，並不能展現出3D的效果。

經過設置透視距離，就至關於把這個區域變成了一個能表現出近大遠小的「3D舞臺」，在其內部就能夠去作3D效果了。

<div class="container">
</div>複製代碼

.container {
  height: 500px;
  background: #eee;
  perspective: 500px;   /* 設置透視距離 */
}複製代碼

舞臺搭好，演員上場，在container中加入一個盒子用來作正方體。設置寬高並定位到舞臺中央，添加一個邊框方便看到位置，設置transform-style屬性，他的做用是容許box這個盒子的子元素進行3d變換

<div class="container">
  <div class="box">
  </div>
</div>複製代碼

.box {
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #000;
  transform-style: preserve-3d;
}複製代碼

正方體有六面，在box中添加六個div用來作他的六個面。

將六個面兩兩一組分爲a, b , c三組方便描述：a1爲離咱們最近的‘前面’，a2就是與a1相對離咱們最遠的‘背面‘，b1爲左側的面，b2爲右側面，c1爲頂部，c2爲底部（參考文章頂部效果圖）

<div class="container">
  <div class="box">
    <div class="a1">a1</div>  <!-- 前 -->
    <div class="a2">a2</div>  <!-- 後 -->
    <div class="b1">b1</div>  <!-- 左 -->
    <div class="b2">b2</div>  <!-- 右 -->
    <div class="c1">c1</div>  <!-- 上 -->
    <div class="c2">c2</div>  <!-- 下 -->
  </div>
</div>複製代碼

將六個面都定位到box的正中心，設置寬高，並把文本居中

.box div {  
  width: 200px;  
  height: 200px;
  position: absolute;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
}複製代碼

此時的六個面至關因而重疊在x軸爲0，y軸爲0，z軸也爲0的地方（x和y軸在屏幕上分別表現爲左右和上下，z軸表示視覺上與咱們的距離遠近）

上面咱們將每一個面的寬高都設置爲200px，也就是相對的兩個面之間的距離應該是200px。

先來設置a1面，沿z軸向前移動100px，也就是向咱們靠近100px，同時給每一個面都加上一個透明的顏色方便看效果

.a1 {
  background: rgba(0, 0, 255, 0.5);
  transform: translateZ(100px);
}複製代碼

而後將a2面沿z軸向後移動100px，也就是相對咱們變遠100px

.a2 {
  background: rgba(0, 0, 255, 0.5);
  transform: translateZ(-100px);
}複製代碼

這樣原本重疊的兩個面，一個靠近100px，一個變遠100px，兩個面之間恰好200px距離

另外還應該將a2沿y軸旋轉180度，也就是翻個面，將有字的這一面對着外面

.a2 {
  background: rgba(0, 0, 255, 0.5);
  transform: translateZ(-100px) rotateY(180deg);
}複製代碼

此時已經看出3d效果生效了，由於近大遠小的原理，雖然都是200px的長寬，離咱們更近的a1面比box的邊框要大出一圈，而較遠的a2則要小一圈

再來設置b1，b1是左側的面，沿x軸左移100px, 而後沿y軸旋轉-90度，將寫字的正面朝向左側

.b1 {
  background: rgba(0, 255, 0, 0.5);
  transform: translateX(-100px) rotateY(-90deg);
}複製代碼

相對的，b2就是右移100px，旋轉正90度

.b2 {
  background: rgba(0, 255, 0, 0.5);
  transform: translateX(100px) rotateY(90deg);
}複製代碼

繼續設置c1，c1是頂部的面，因此沿y軸上移100px，而後沿x軸旋轉90度

.c1 {
  background: rgba(255, 0, 0, 0.5);
  transform: translateY(-100px) rotateX(90deg);
}複製代碼

相對的，c2爲底部，沿y軸下移100px，而後沿x軸旋轉-90度

.c2 {
  background: rgba(255, 0, 0, 0.5);
  transform: translateY(100px) rotateX(-90deg);
}複製代碼

此時這個3D的立方體已經完成了，爲了能看出更明顯的立體效果，再加一些變化

回到.box的樣式，將邊框去除，而後增長一點角度的傾斜

.box {
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg);
  /* border: 1px solid #000; */
  transform-style: preserve-3d;
}複製代碼

最後添加一個旋轉的動畫

.box {
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg);
  /* border: 1px solid #000; */
  transform-style: preserve-3d;
  animation: run 5s linear;
  animation-iteration-count: infinite;
}

@keyframes run {
  0% {
    transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(360deg);
  }
}複製代碼