未公開草稿 — 這一集不會出現在首頁、系列索引和 sitemap。
BEYOND FRONTEND · EP02
Draft全息卡
同一張會在光底下轉的卡，2010 年要預先切圖逐張切換，2015 年跟得到手但卡片是平的，現在沒有用任何動畫套件，補間全部交給瀏覽器自己算。
01 / THE HOOK
同一張卡，三個年代。
同一個效果，在三個年代分別做得到甚麼程度。左邊那張跟不到手，因為那個年代只能預先算好幾個角度、逐張切換。
- YEARS
- 20+
- STATUS
- BUILDING
- YEARS
- 20+
- STATUS
- BUILDING
- YEARS
- 20+
- STATUS
- BUILDING
三格都是真的在跑，不是錄影，而且共用同一條 8 秒軌跡，所以差別只來自做法。 前兩格是用今天的 CSS 模擬當年做得到的「呈現結果」，不是當年的原始 code。
02 / THEN vs NOW
同一張卡，十年前要怎樣做？
這個效果本身不新。新的是做它的代價——同樣一張會在光底下轉的卡，這十幾年之間換過三次做法。
CSS 3D transform 還沒普及。多數靠 Flash，或者預先算好一組角度的圖片逐張切換。
待補
3D transform 可以用了，但遮罩要靠 PNG alpha，動畫要 JavaScript 逐幀組 transform 字串。
待補
混合模式、遮罩都能用了，但自訂屬性不能被瀏覽器補間，「放開後彈回」仍然要外掛動畫庫。
待補
@property 讓自訂屬性可以補間，彈回交給 CSS；遮罩與混合模式都是標準配備。JavaScript 只剩一件事：把游標座標寫進兩個變數。
待補
兩件事要作者補：「我當年」那一欄——這是整篇最不可替代的部分，沒經歷過的年代寫「這個年代我沒做過類似的東西」也可以，但不要編；以及年份覆核——目前依瀏覽器支援時序推斷，上線前用 Baseline 或 caniuse 查實再寫死。
現在這一代的做法：三層
- 第一層
遮罩 — 決定光出現在哪
真的閃卡不會整張閃。你手上任何一張球星卡或寶可夢卡，燙箔都是局部的：logo、邊框、某個角。整張蓋滿反而假。所以彩虹層要套一張遮罩，只在指定區域出現。這是三層裏差別最大的一層。
- 第二層
視差 — 決定卡有多厚
隔著櫥窗玻璃看東西，反光和裏面的東西是不同步的。因為中間有厚度。卡片同理：光澤和彩虹要跟卡面反向位移，而且倍率不同。這是厚度感的唯一來源。
- 第三層
收斂 — 決定它看起來貴還是便宜
最大傾斜角收在 8 至 12 度。這一層不是技術，是分寸。角度給到 25 度，效果更「明顯」，但也更廉價——demo 裏可以自己拉到 30 度感受一次。
| 其餘四個細節 | 為甚麼 |
|---|---|
| 兩層疊加 | 光澤用 soft-light、彩虹用 color-dodge。單層永遠像貼紙，兩層才有金屬感。 |
| transition 的開關 | 游標進入時關掉、離開時打開。不然跟手會有延遲，像卡頓。 |
| 只更新 CSS 自訂屬性 | 不要組 transform 字串。效能與可維護性差一個量級。 |
| prefers-reduced-motion | 減少動態時停用傾斜，改靜態微光。這不是加分項。 |
這幾層沒有一層是難的。難的是知道它們可以疊。
03 / LIVE DEMO
自己撥一下遮罩開關。
把「遮罩」關掉，或者把視差倍率拉到 0，卡片就會立刻變回第一格那個樣子。傾斜角拉到 30 度，你會親身感受到廉價感由何而來。
04 / TAKE IT
拿去用。
這能用在哪：會員卡或訂閱方案卡、作品集封面、活動票券頁、產品規格卡。共通點是「一個值得被多看兩眼的小區塊」——不要整頁都這樣做。
兩段都可以直接複製：CSS 是成品，Prompt 是給 Cursor、Claude 或 v0 的指令。
內容未補上，暫時不提供複製。
內容未補上，暫時不提供複製。
CSS 節錄與提示詞全文由作者提供，未補上之前不放內容，避免貼出一份跟 demo 不一致的 code。
05 / UNDER THE HOOD
實作細節。
這一段寫給想自己重做一次的人。不想看的話，可以直接跳去最後一段。
展開實作細節
- 當年那個做法為甚麼慢待補
- 遮罩層是怎樣做出來的待補
- 視差的數學：反向位移與倍率待補
- 兩層 blend mode 的疊法待補
- 為甚麼只更新 CSS 自訂屬性待補
- reduced motion 的處理方式待補
五個小節與踩坑清單的內容尚未撰寫，先建立結構。
06 / THE PROCESS
這一集是怎樣做出來的。
過程紀錄（花了多久、重寫幾次、卡在哪裏）由作者撰寫，150–250 字。這一段不會省略——它是這個技術系列接回個人記錄的地方。
NEXT
下一篇，繼續解決一個看得見的網站問題。
《前端延伸》由實際成果開始，再簡單交代背後技術。內容完成後才會公開，製作過程和修改判斷會先放在 Threads。