CSS－Flip Card

久違的 CSS。

簡述

有些時候可能會需要用到這個酷炫的效果：

原本我以為這很難搞，不過學完後發現其實沒那麼複雜，所以就順便記錄一下吧！

範例

在寫 CSS 前要先解釋一下 HTML 結構。不用想得太負責，其實就跟現實中的卡片一樣，一張卡片會有正面跟反面，所以 HTML 也會分成兩塊，一塊是「正面的內容」，一塊是「反面的內容」：

<div class="card">
  <div class="card__inner front">
    <p>Front</p>
  </div>
  <div class="card__inner back">
    <p>Back</p>
  </div>
</div>

我們先加上一些卡片的預設樣式：

body {
  background-color: #1b1523;
  font-size: 2em;
  color: #fff;
}
.card {
  display: inline-block;
  margin: 40px;
}
.card__inner {
  width: 200px;
  height: 200px;
  display: flex;
}
.card__inner p {
  margin: auto;
}
.card .front {
  background: #2aac9e;
}
.card .back {
  background: #6351c3;
}

加完後，畫面應該會長這樣：

接下來，在卡片還沒有被翻面前，我只希望他顯示「Back」的部分，所以我們可以把 .front 部分改成這樣：

.card .front {
  position: absolute;
  transform: rotateY(90deg);
  background: #2aac9e;
}

結果就會變這樣：

我一開始很疑惑，為什麼這樣正面就消失了？

這是因為 absoulte 跟 rotateY 的設定。順道一提，一直到寫這篇筆記後我才知道 rotate 原來是可以指定 Y 軸跟 X 軸的值的。

首先 absoulte 是為了讓 .front 脫離「排版流」，藉此讓 .back 來遞補 .front 讓出來的空間。

也就是說這個時候的 .front 其實是疊在 .back 身上的，只是因為又加了 rotateY(90deg) 才消失的。

怎麼做到的？來看下面這張圖應該就理解了：

用三維空間的角度來思考 X 軸跟 Y 軸應該就能理解了。

總之做到這邊後，其實就差不多完成了。剩下的只是加上一下 transition 的效果而已：

.card .front {
  position: absolute;
  transform: rotateY(90deg);
  background: #2aac9e;
  transition: transform 0.2s;
}
.card .back {
  background: #6351c3;
  transform: rotateY(0deg);
  transition: transform 0.2s;
  transition-delay: 0.2s;
}
.card:hover .front {
  transform: rotateY(0deg);
  transition-delay: 0.2s;
}
.card:hover .back {
  transform: rotateY(90deg);
  transition-delay: 0s;
}

這邊會看不太懂的地方應該是 delay 的部分。簡單來說，這樣寫的用意是希望在 hover 的時候：

1. .front 等 0.2s 後再秀出來
2. .back 等 0s 後就藏起來

總而言之延遲的目的是讓動畫看起來沒有衝突，這就是 delay 的用意。

如果還是不太懂的話，建議先去重溫一下 delay 是怎麼運作的，之後再回來看應該就懂了。

想實際玩玩看的話可以到 這邊 參考。