Day 16
CSS動畫：翻牌動作初步實作
今天的任務是將昨天完成的卡片外觀進一步升級，透過CSS 動畫實現「翻牌」效果，讓遊戲從靜態版面進入更接近實際互動的狀態。翻牌是許多小遊戲的核心體驗（例如記憶配對、抽獎卡片），若能用平滑、自然的動畫呈現，將大幅提升玩家的沉浸感。這一步驟會專注在純CSS初步翻牌實作，先不用 JavaScript 控制遊戲邏輯，僅實現基本的動畫效果。

一、翻牌的基本原理
翻牌動畫的核心是3D 旋轉 (rotateY)與背面隱藏 (backface-visibility)：
rotateY(180deg)：卡片繞 Y 軸旋轉，達到翻面的效果。
backface-visibility: hidden：隱藏卡片背面，避免同時看到正反兩面。
transition / transform：加入平滑的過渡動畫。

為了讓翻轉更真實，我們需要兩個卡片面：正面（front）和背面（back），並用一個容器 .card-inner 包起來。

二、HTML 結構

<div class="card">
  <div class="card-inner">
    <div class="card-front">?</div>
    <div class="card-back">🍀</div>
  </div>
</div>

.card：外部容器，負責卡片的大小與 perspective。
.card-inner：內部容器，進行旋轉。
.card-front：卡片正面（例如「？」符號）。
.card-back：卡片背面（例如圖案或文字）。

三、CSS 翻牌樣式

.card {
  width: 120px;
  height: 160px;
  perspective: 1000px; /* 建立3D深度 */
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

/* 翻牌效果：加上 .flipped 時旋轉 */
.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

/* 正面樣式 */
.card-front {
  background: var(--main-color, #e89aa9);
  color: #fff;
}

/* 背面樣式 */
.card-back {
  background: #fff;
  color: var(--main-color, #e89aa9);
  transform: rotateY(180deg);
}

.card.flipped 控制卡片旋轉，之後可用 JS 在點擊時切換。
transition: 0.6s 讓翻牌過程自然、流暢。
transform-style: preserve-3d 確保前後面有立體感。

四、初步互動（暫用 hover）
若今天只做初步展示，可以用hover 模擬翻轉：

.card:hover .card-inner {
  transform: rotateY(180deg);
}

當滑鼠移入卡片，就會翻面。這是一個簡單可視化的測試效果，讓我們在沒有 JS 的情況下，先驗證動畫是否順暢。

五、動畫細節優化
為了讓翻牌更自然，可以增加：
陰影效果：翻轉時有立體感。
速度曲線 (cubic-bezier)：調整動畫節奏，讓翻牌看起來更像真實物體。

.card-inner {
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

六、今日測試成果

1. 滑鼠移入卡片即可看到「? → 🍀」的翻牌效果。
2. 動畫平滑自然，前後面切換不會重疊。
3. 預留了 .flipped class，未來加入 JavaScript 時，可透過點擊觸發翻牌，形成完整遊戲邏輯。

今日總結
透過CSS 3D transform + transition，我們成功實現了翻牌的初步動畫，讓卡片不再只是靜態顯示，而是能在玩家互動時展現翻面的效果。這個小小的動畫，不僅讓遊戲更直覺，也增添了視覺上的驚喜。
接下來的步驟，可以進一步將翻牌效果與JavaScript 事件結合，例如：
點擊卡片才翻轉，而非 hover，檢查兩張翻開的卡片是否配對成功，翻牌次數限制與分數統計。