只使用 CSS！拆解寶可夢 3D 閃卡特效

2025/09/22 913 字

在網路上看到 pokemon-cards-css 把寶可夢卡牌的 3D 及閃膜用純 CSS 做出來，真的超帥！這篇整理我理解原始碼並自己實作的過程。

1. 卡片骨架

卡片的 DOM 結構只有三層 div：

.cardContainer：卡片的容器，用來置中卡片並設定比例。
.card：卡片本身，負責建立 3D 空間。
.rotator：實際執行 3D 旋轉的元素

1
<div className='cardContainer'>
2
  <div className='card'>
3
    <div className='rotator'>
4
      <img src='圖片網址' />
5
    </div>
6
  </div>
7
</div>

搭配 CSS 讓卡片擁有 3D 空間：

1
.cardContainer {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}
6

7
.card {
8
  /* 透視深度，數值越小，透視變形的效果越強 */
9
  perspective: 600px;
10
  /* 讓裡面的子元素都位於 3D 空間 */
11
  transform-style: preserve-3d;
12
}
13

14
.rotator {
15
  position: relative;
16
  transform-style: preserve-3d;
17
  transform-origin: center;
18
  /* 利用 CSS 變數控制轉動，初始值為 0 */
19
  transform: rotateY(var(--rotate-y, 0)) rotateX(var(--rotate-x, 0));
20
}

這樣一來，我們的卡片就已經具備了 3D 的基礎，雖然現在看起來還不會動。

2. 卡片隨滑鼠傾斜

接著，我們需要用到 JavaScript 讓卡片可以偵測到滑鼠的位置，並跟著傾斜。

在 .card 上綁定 onMouseMove 事件：

1
const onMouseMove = (e) => {
2
  const rect = e.currentTarget.getBoundingClientRect();
3
  const x = e.clientX - rect.left;
4
  const y = e.clientY - rect.top;
5
  const xp = Math.round((x / rect.width) * 100);
6
  const yp = Math.round((y / rect.height) * 100);
7
  const dx = xp - 50;
8
  const dy = yp - 50;
9

10
  setCardVars({
11
    '--pointer-x': `${xp}%`,
12
    '--pointer-y': `${yp}%`,
13
    '--rotate-x': `${dy / 2}deg`, // Y 軸偏移量拿來轉 X 軸
14
    '--rotate-y': `${-dx / 3.5}deg`, // X 軸偏移量拿來轉 Y 軸
15
    '--rotator-transition': '120ms',
16
  });
17
};

程式碼的邏輯很單純：

取得滑鼠在卡片內的座標 (x, y)
將座標轉換成百分比 (xp, yp)
計算滑鼠位置與卡片中心的偏移量 (dx, dy)
根據偏移量去設定 --rotate-x、--rotate-y 等 CSS 變數，卡片就會跟著旋轉了！

記得再透過 setCardVars 設定 CSS 變數，卡片就會神奇地動起來了！

如何使用 JS 設定 CSS 變數？

1
const cardRef = useRef(null);
2
const pointerStateRef = useRef({ x: 50, y: 50 });
3

4
const setCardVars = (vars) => {
5
const node = cardRef.current;
6
if (!node) return;
7

8
for (const [k, v] of Object.entries(vars)) {
9
node.style.setProperty(k, v);
10

11
    if (k === '--pointer-x') {
12
      const n = parseFloat(v);
13
      if (!Number.isNaN(n)) pointerStateRef.current.x = n;
14
    }
15
    if (k === '--pointer-y') {
16
      const n = parseFloat(v);
17
      if (!Number.isNaN(n)) pointerStateRef.current.y = n;
18
    }
19

20
}
21
};

當滑鼠移開時，也要記得把卡片轉回原位：

1
const onMouseLeave = () => {
2
  setCardVars({
3
    '--rotate-x': '0deg',
4
    '--rotate-y': '0deg',
5
    '--rotator-transition': '600ms',
6
  });
7
};

3. 加上眩光效果

最後，來為卡片加上閃亮的眩光效果吧！

先在 .rotator 裡面加上一個 .glare 元素：

1
<div className='rotator'>
2
  <img src='圖片網址' />
3
  <div className='glare' />
4
</div>

.glare 的樣式是利用 radial-gradient 做出來的：

1
.glare {
2
  position: absolute;
3
  inset: 0;
4
  mix-blend-mode: overlay;
5
  /* 眩光本體 */
6
  background-image: radial-gradient(
7
    farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
8
    hsla(0, 0%, 100%, 0.8) 10%,
9
    hsla(0, 0%, 100%, 0.65) 20%,
10
    hsla(0, 0%, 0%, 0.5) 90%
11
  );
12
  opacity: var(--glare-opacity, 0);
13
  transition: opacity var(--glare-transition, 300ms) ease-out;
14
  pointer-events: none; /* 讓滑鼠可以穿透這層 */
15
}

記得一樣要在 setCardVars 裡面設定 --glare-opacity 跟 --glare-transition，這樣當滑鼠移進卡片時，眩光才會出現：

1
const onMouseMove = (e) => {
2
  ...
3
  setCardVars({
4
    ...
5
    '--glare-opacity': '1',
6
    '--glare-transition': '180ms',
7
  });
8
};
9

10
const onMouseLeave = () => {
11
  setCardVars({
12
    ...
13
    '--glare-opacity': '0',
14
    '--glare-transition': '600ms',
15
  });
16
};

完整程式碼

這篇會再持續學習並更新其他閃卡特效～

Molly Su

只使用 CSS！拆解寶可夢 3D 閃卡特效

1. 卡片骨架

2. 卡片隨滑鼠傾斜

3. 加上眩光效果

完整程式碼

文章目錄