CSS 3D

當要做 CSS 3D 的效果時，可以先假想兩層的元素。外層是視角，是用第三人稱的方向在看著內層；內層就是物件的本身，可以有不同的 3D 屬性(旋轉、位移等等)。

HTML 結構如下：

<div class="perspective"> 
  <div class="box"> 
  </div>

在CSS 的屬性上，外層會提供 perspective 的透視屬性，這是從第三人稱看物件的距離，值可以先使用 500px ~ 1000px (不負責研究，通常這個起手式效果不太差)；在內層的屬性則必須包含 transform-style: preserve-3d，讓物件本身已 3D 的模式呈現，並加入 transform 的變形屬性，就可以完成基本的 CSS 3D 。

CSS 結構如下：

.perspective {
  perspective: 500px;
}
.box {
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}