總結
僅使用transform來做出「滑鼠 hover 後，卡片出現翻頁效果」的動畫
See the Pen 2-side flip card by Charlie (@Charlie7779) on CodePen.
筆記
HTML
- 相對單純，使用一個
.card容器包裹卡片的兩面內容card--front與card--back
CSS
- 第 2 行：設定
position: relative;讓.card成為card--front與card--back的定位點 - 第 8 行：
perspective: 9999px;讓卡片在翻動時，在視覺上不會離使用者太近；可參考下圖兩種數值的呈現結果
- 第 16 行：
[class^="card--"]代表選取所有.card下並 class 開頭是card--的元素 - 第 25 行：
backface-visibility: hidden;讓卡片內容不穿透到另外一面 - 第 43 行：
transform: rotateY(180deg);代表卡片背面一開始就已經進入「被翻面」的狀態 - 第 46-55 行：hover 後卡片本身在 Y 軸提高 4px（
transform: translateY(-4px);）、卡片正面翻轉 180 度（transform: rotateY(180deg);），而卡片背面則轉回正面（transform: rotateY(360deg);）