簡介

想成為魔法少女的第一個挑戰，就是馴服屬於自己的魔法道具，那麼今天我們就來試試看完成兩個魔法咒語吧！

第一個範例 我們先來試試看施放一個魔法，做出 3D 立體的盒子模型，了解一下如何將六面體的每一個面透過位移拼接起來。並且在滑鼠 hover 時會有選轉效果。

第二個範例 我們將會學習如何召喚魔法卡，透過將兩張重疊卡片同時翻轉，並結合 backface-visibility語法設定翻轉時要顯現出哪一個 面 給觀看者看。

那麼，就開始吧！

3D 盒模型

• 首先我們先將盒模型的每一個面都先架構好，並讓最外層的 layer 設為定位原點，group 設為絕對定位讓盒模型定位於畫面正中央：

<div class="layer">
  <div class="group">
    <div class="face front">front</div>
    <div class="face top">top</div>
    <div class="face back">back</div>
    <div class="face botton">botton</div>
    <div class="face right">right</div>
    <div class="face left">left</div>
  </div>
</div>

.group {
  width: 100px;
  height: 100px;
  border: solid 1px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;

• 接著我們將 group 加上為 3D環境 與 景深，景深值越大，變形效果越不明顯：

.group {
  transform-style: preserve-3d;
  perspective: 100px;
}

• 完成了盒模型的 group，我們可以來處理每一個面的定位囉。首先我們先設定好每一個面的共用樣式，設定好之後我們可以看到六個面被重複堆疊再一起：

.face {
  width: 100px;
  height: 100px;
  border: solid 1px;
  font-size: 24px;
  line-height: 100px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

• 針對每一個面個別去給予定位，並且給予不同的背景色或字體顏色以區分不同的面：

/* 前面的面向 Z軸 前進 50px，其餘以此類推 */
.front {
  background-color: lightblue;
  transform: rotateX(0deg) translateZ(50px);
}

• 因為當我們旋轉盒子時，是整個盒模型在旋轉，所以告訴 group 在沒有旋轉時的靜止狀態要用哪一個 面 面對觀看者、旋轉後的位移狀態以及旋轉的時間。並且給予盒模型一個旋轉原點：

.group {
  transform: rotate3d(0, 0, 0, 0deg);
  transition: 1s;
}
.group:hover {
  transform: rotate3d(1, 1, 1, -180deg);
  transform-origin: 50px;
}

完成！

無主之物，匯之於夢之杖，成為吾的力量吧！包圍！

翻轉卡牌

• 一樣的，我們先把卡牌與環境架構好，讓最外層的 space-3d 設為定位原點，並讓裡面的 box 自動填滿外層容器以便讓 內層 front 與 back 絕對定位於畫面中央：

<div class="space-3d">
  <div class="box">
    <div class="box-front"></div>
    <div class="box-back">
    </div>
  </div>
</div>

.space-3d {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.box {
  width: 200px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

• 由於我們是透過 background 填入卡牌圖片，所以我們需要先給元素一個固定的寬高，並且調整卡牌元素定位，此時可以看到前後兩張卡片堆疊再一起：

.box-front {
  width: 200px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

• 將卡片圖片放入元素中，調整一下背景圖尺寸，定位等細節：

.box-front {
  background-image: url("https://i.imgur.com/vhuXDaP.jpg");
  background-size: 200px 400px;
  background-repeat: no-repeat;
  background-position: center;
}

• 我們將 front 卡牌元素設定起始 面 的旋轉角度為 0度 (正面面向觀看者)，而 back 卡牌元素設定起始 面 的旋轉角度為 180度 (背面面向觀看者)：

.box-front {
  transform: rotateY(0deg);
}
.box-back {
  transform: rotateY(180deg);
}

• 接著將 front 卡牌元素的背面 hidden 起來，由於 front 的背面是背對觀看者的，所以視覺上沒有影響。再把 back 卡牌元素的背面 hidden起來，此時因為 back 的背面是面對觀看者，因此將背面隱藏起來即會透視過去看到 front 的正面。

.box-front {
  backface-visibility: hidden;
}
.box-back {
  backface-visibility: hidden;
}

• 再來我們設定外層 space-3d :hover 時內層卡片會翻轉。我們將 front 翻轉 180度，並同時把背面 hidden 起來，此時因為 front 正面是面對觀看者的，所以隱藏起來觀看者就會看不到。再把 back 卡牌元素「再」翻轉 180度 ，並將背面 hidden起來，此時因為 back 的正面翻轉已經是面對觀看者了，因此將背面隱藏視覺上沒有影響：

.box:hover .box-front {
  transform: rotateY(180deg);
	backface-visibility: hidden;
}
.box:hover .box-back {
  transform: rotateY(360deg);
	backface-visibility: hidden;
}

• 接著我們就可以加上旋轉時間以及景深讓他看起來更有立體感囉～

.box-front, .box-back {
  transition: .5s;
}
.box {
  perspective: 500px;
}

完成

隱藏著黑暗力量的鑰匙呀，現在以你的主人之名命令 － 封印解除！

那麼天今天的範例介紹就寫到這邊囉，大家有沒有真的實作出來呢？
Transfrom 3D 還有許多有趣的動畫效果可以嘗試，如果大家有實做出其他作品，也非常歡迎回來分享，大家一起交流交流呦～

今日魔法少女先去拯救小鎮啦～大家明天見！