桌遊系列 翻轉卡片範例

日期：

翻轉卡片範例的詳細步驟與說明：

1. 建立 HTML 檔案

首先，在你的電腦上建立一個新的檔案，例如命名為 index.html。

2. 編寫基本的 HTML 結構

在檔案中加入基本的 HTML 結構，包括 <!DOCTYPE html>、<html>、<head> 和 <body>。在 <head> 區塊中設定網頁的字元編碼（例如 UTF-8）與標題：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>翻轉卡片示範</title>
  <!-- 其他程式碼會放在這裡 -->
</head>
<body>
  <!-- 內容會放在這裡 -->
</body>
</html>

3. 撰寫 CSS（從 Stylus 轉換而來）

接下來在 <head> 區塊中加入 <style> 區塊，將 Stylus 轉換後的 CSS 寫入。這段 CSS 設定了整個頁面的排版（例如：讓 body 充滿整個視窗，並使用 flexbox 置中容器），以及設定翻轉卡片的樣式與動畫效果：


  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    body {
      background: #00A5F7;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .container {
      width: 300px;
      height: 200px;
      position: relative;
      perspective: 800px;
      border-radius: 4px;
    }
    .card {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border-radius: 6px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
      cursor: pointer;
    }
    .card div {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 6px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      color: #47525D;
    }
    .card .back {
      transform: rotateY(180deg);
    }
    .card.flipped {
      transform: rotateY(180deg);
    }
  </style>

4. 引入 jQuery 函式庫

由於我們要使用 jQuery 來實現點擊翻轉的功能，在 <head> 區塊中或在 <body> 結尾前引入 jQuery 函式庫。這裡我們透過 CDN 載入 jQuery 3.6.0：

https://chatgpt-assist-math-solving.blogspot.com/2025/03/jquery.html

5. 撰寫 HTML 結構內容

在 <body> 區塊中加入一個容器 .container，容器內放入一個 .card 卡片，並在卡片內部加入兩個區塊，一個為正面（.front）和一個為背面（.back）。正面顯示提示文字，背面則顯示翻轉後的文字：


<body>
  <div class="container">
    <div class="card">
      <div class="front">Click to flip</div>
      <div class="back">Yo, what up?</div>
    </div>
  </div>
  <!-- 後續會在這裡加入 JS -->
</body>

6. 加入翻轉卡片的 JavaScript 程式碼

在 <body> 區塊的結尾處加入一個 <script> 區塊，利用 jQuery 為 .container 綁定點擊事件。點擊時，切換卡片 .card 的 flipped 類別，使得 CSS 中定義的翻轉動畫得以執行：


  <script>
    $('.container').on('click', function () {
      $('.card').toggleClass('flipped');
    });
  </script>

7. 完整的 HTML 程式碼

將以上各個部分整合在一起後，完整的 HTML 程式碼如下：


<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>翻轉卡片示範</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    body {
      background: #00A5F7;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .container {
      width: 300px;
      height: 200px;
      position: relative;
      perspective: 800px;
      border-radius: 4px;
    }
    .card {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border-radius: 6px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
      cursor: pointer;
    }
    .card div {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 6px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      color: #47525D;
    }
    .card .back {
      transform: rotateY(180deg);
    }
    .card.flipped {
      transform: rotateY(180deg);
    }
  </style>
  <!-- 引入 jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 ...
</body>
</html>

8. 測試與調整

將這份程式碼存檔後，在瀏覽器中開啟 index.html。你應該能看到一個卡片位於頁面中央，當你點擊容器時，卡片會以翻轉效果呈現正反兩面的內容。如果需要調整動畫速度或卡片大小，只需修改 CSS 中對應的屬性即可。

這就是從零開始製作一個帶有翻轉動畫效果的卡片範例的完整步驟與解說。