TailwindCSS 變形 Transform：scale、rotate、3D 全解 | TailwindCSS 完整教學

上一篇替畫面裝上了「鏡頭」，這一篇讓元素真正「動起來」。TailwindCSS 的變形（Transform）系統涵蓋 scale（縮放）、rotate（旋轉）、translate（位移）、skew（傾斜）四種 2D 變形，以及 transform-origin（變形原點），讓你不改動版面就能放大、旋轉、位移、傾斜任何元素。而 v4 更新增了一整套原生 3D 變形工具——perspective、rotate-x/y/z、translate-z、transform-3d、backface——過去要靠自訂 CSS 才能做的卡片翻轉、3D 傾斜，現在用純 class 就能完成。搭配過渡（transition），變形正是 hover 放大、翻轉卡片、滑入動畫等互動效果的核心引擎。

前言

上一篇 《濾鏡》 我們替畫面裝上了「鏡頭」，讓你不改圖片檔本身就能即時調色、模糊、做出毛玻璃質感。但到目前為止，元素都還乖乖待在它原本的位置與形狀——沒有旋轉、沒有縮放、沒有傾斜，更沒有立體感。想讓卡片在滑鼠移入時輕輕放大、讓箭頭在展開時優雅翻轉 180 度、讓通知從畫面外滑進來、甚至讓卡片像實體卡牌一樣翻面？這些「讓元素動起來」的能力，正是這一篇 變形（Transform） 要交給你的。

用一個生活化的類比來理解變形系統：想像每個元素都貼在一片透明的塑膠片上，而你可以對這片塑膠片做四種操作。 你可以把它整片放大或縮小（scale）、以中心為軸轉一個角度（rotate）、推到旁邊或上下移動位置（translate），或者把它斜著剪一刀做出錯切效果（skew）。關鍵是——動的只是「看起來」的樣子，元素在版面上原本佔的格子並不會改變，就像塑膠片浮在頁面上方滑動，底下的排版紋風不動。而 v4 更進一步：這片塑膠片現在可以繞著 X 軸、Y 軸「翻」進第三維空間（rotate-x／rotate-y），只要先在容器上設定「透視深度」（perspective），就能做出真正近大遠小的 3D 立體效果。Tailwind 把這一整套變形工法都做成了 class，你不用手寫 CSS 的 transform，就能即時擺弄任何元素。

而 TailwindCSS v4 是本系列的預設版本，它對變形系統做了兩項關鍵更新：一是所有變形工具（scale-*、rotate-*、translate-*、skew-*）不再需要額外的 transform 開關 class 就能生效（v3 中你得寫 transform scale-105 才作用）；二是新增了完整的原生 3D 變形工具。本篇你將學到：

• 2D 變形四件套：scale（縮放）、rotate（旋轉，含負值）、translate（位移，含經典絕對置中）、skew（傾斜）
• transform-origin：用 origin-* 控制變形的「支點」在哪裡
• v4 3D 變形：perspective-*、transform-3d、rotate-x/y/z-*、translate-z-*、backface-hidden，做出 3D 翻轉卡片
• 變形 × 過渡：hover:scale-105 transition-transform 這類 hover 動效的標準寫法，以及 transform-gpu 效能優化
• v3 → v4 差異：變形工具自動組合、不再需要 transform class、v4 新增整套 3D 變形

本系列以 TailwindCSS v4 為預設版本，範例皆可直接執行。凡涉及 v3 差異之處，我會特別標註。

核心概念

變形工具的分類全景

Tailwind 的變形 utility 分成 2D 與 v4 新增的 3D 兩大群組。下表先建立全景，涵蓋每個工具的代表 class 與對應 CSS：

不用一次記完。核心心智模型有三句話：2D 變形（scale／rotate／translate／skew）只改元素「看起來」的樣子、不動版面；transform-origin 決定變形繞著哪個點發生；v4 的 3D 變形需要父層 perspective 才有立體感。 抓住這三點，其餘都是刻度與命名細節。

變形不影響 layout：最重要的一句話

理解變形系統的第一把鑰匙，是分清**「視覺」與「版面」：transform 只是視覺變形，元素在 DOM 中仍佔據變形前的原始尺寸與位置。** 這句話貫穿所有變形工具：

• 你用 scale-50 把方塊縮成看起來一半大，它在版面上仍佔原始尺寸的空間，旁邊元素不會補位，會留下一圈空白。
• 你用 translate-x-full 把元素滑到旁邊，原位置依然被保留、不會塌陷。
• 你用 rotate-45 把卡片轉 45 度，它佔的格子還是原本那個矩形。

這是刻意設計——正因為變形不觸發版面重排（layout），瀏覽器才能用它做出每秒 60 影格的流暢動畫。這也是為什麼「hover 放大」「滑入動畫」一律該用 transform，而不是去改 width／top／left。要理解為什麼，得先認識瀏覽器的渲染流程：一次畫面更新會經過「計算樣式 → 排版（layout）→ 繪製（paint）→ 合成（composite）」四個階段。改動 width、top、left 這類會影響尺寸與位置的屬性，會從最前面的「排版」階段就重跑一遍，牽動整個頁面所有元素重新計算位置，代價最高；而 transform 與 opacity 只需要跑到最後的「合成」階段，瀏覽器可以把變形的元素單獨交給 GPU 貼圖處理，其他元素完全不受影響。這正是變形動畫流暢、而 top／left 動畫卡頓的根本原因——記住這個渲染流程，你在做任何動畫時都會下意識選對屬性。

scale、rotate、translate、skew 的刻度邏輯

四種 2D 變形各有一套直覺的刻度：

• scale-*（縮放）：以 100 為原始大小。scale-100 不變、scale-50 縮成一半、scale-105 放大 5%（hover 微放大最愛）、scale-150 放大 1.5 倍、scale-0 縮到不可見。可分軸：scale-x-75（只水平縮）、scale-y-110（只垂直放）。負值做鏡像翻轉：-scale-x-100 是水平鏡像（左右顛倒）、-scale-y-100 是垂直翻轉、-scale-100 上下左右全翻。
• rotate-*（旋轉）：直接對應度數。rotate-45（45°）、rotate-90（90°）、rotate-180（半圈）；負值逆時針：-rotate-6、-rotate-90。常見小角度 rotate-1～rotate-12 做輕微傾斜的俏皮感。
• translate-*（位移）：沿用 Tailwind 的 spacing scale（translate-x-4 是右移 16px），也支援分數（translate-x-1/2 右移自身寬度一半、translate-x-full 移出一整個寬度）與負值（-translate-y-2 上移 8px）。這是四者中最常用的。
• skew-*（傾斜）：對應錯切度數。skew-x-6（水平斜 6°）、skew-y-3（垂直斜 3°），含負值 -skew-x-12，多用於斜切裝飾區塊、動感標籤。

這四種變形最強大的地方在於可以自由組合。在 v4，你把 scale-105 rotate-6 -translate-y-1 三個 class 直接寫在同一個元素上，它們會分別寫入 --tw-scale-x、--tw-rotate、--tw-translate-y 等獨立的 CSS 自訂屬性，最後統一組裝成一條 transform 屬性，彼此互不覆蓋——這正是 v4 變形系統的底層設計。所以你能放心地一次疊加放大、旋轉、位移，做出「hover 時卡片微微放大、順時針轉一點、往上浮起」這種豐富的複合動效。另外，若刻度不夠用，四種變形全都支援任意值：rotate-[17deg]（精確 17 度）、scale-[0.83]（精確 83%）、translate-x-[120%]（移出 120%）、skew-x-[15deg]（自訂傾斜），彈性十足。

transform-origin：變形的支點

origin-* 控制 transform-origin，也就是變形繞著哪個點發生。預設是 origin-center（中心），旋轉、縮放都以正中央為支點。改成 origin-top-left（左上角）後，rotate-45 就會像門板繞著左上角轉開，而不是原地打轉。九宮格位置齊全：origin-top、origin-top-right、origin-right、origin-bottom-right、origin-bottom、origin-bottom-left、origin-left、origin-center，也支援任意值 origin-[25%_75%]。做選單彈出、卡片掀開等效果時，選對支點是關鍵。

v4 3D 變形：立體感從「透視」開始

這是 v4 全新的原生工具（v3 只能靠自訂 CSS）。3D 變形的核心觀念是：平面上的旋轉需要「透視深度」才會有立體感。 三個關鍵工具：

• perspective-*（透視）：加在父容器上，為子元素建立 3D 觀看深度。值越小透視越誇張、越大越平緩：perspective-dramatic（近，強烈）、perspective-normal、perspective-distant（遠，平緩），也可用任意值 perspective-[1000px]。沒有 perspective，3D 旋轉只會像被壓扁、毫無立體感。
• transform-3d（保留 3D 空間）：對應 transform-style: preserve-3d，讓子元素真正存在於 3D 空間而非被壓平回 2D 平面——卡片翻轉必備。
• rotate-x-* / rotate-y-* / rotate-z-*：繞 X 軸（上下翻）、Y 軸（左右翻）、Z 軸（平面旋轉，等同 2D rotate）旋轉，皆含負值。搭配 translate-z-*（沿深度拉近推遠）、backface-hidden（隱藏背面，翻轉卡片必用），就能組出各種立體效果。

實作範例

理論看完，我們用三個高頻範例把 hover 放大、旋轉互動、絕對置中與 3D 翻轉卡片串起來。以下都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

範例一：hover 放大卡片與互動微動效

hover:scale-* 配 transition-transform 是最泛用的互動手法：滑鼠移入時卡片、按鈕、圖示輕輕「有反應」。關鍵是變形一定要搭配 transition，否則會瞬間跳變、沒有動畫：

<!-- 圖片卡片：hover 時放大並淡入遮罩，overflow-hidden 讓放大的圖不溢出圓角 -->
<div class="group relative overflow-hidden rounded-2xl cursor-pointer w-72">
  <img src="photo.jpg" alt="照片"
       class="w-full h-48 object-cover
              transition-transform duration-500 ease-out
              group-hover:scale-110">
  <!-- 遮罩在 hover 時淡入 -->
  <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20
              transition-colors duration-300"></div>
</div>

<!-- 按鈕：hover 微放大、按下時縮小回饋，只過渡 transform 最流暢 -->
<button class="px-6 py-3 bg-cyan-600 text-white font-semibold rounded-xl
               hover:scale-105 active:scale-95
               transition-transform duration-150">
  點擊我
</button>

<!-- 圖示：hover 同時放大 + 旋轉，transition-all 讓陰影也一起過渡 -->
<div class="w-16 h-16 bg-cyan-500 rounded-2xl flex items-center justify-center
            hover:scale-110 hover:rotate-6
            transition-all duration-300 cursor-pointer shadow-md hover:shadow-xl">
  <span class="text-white text-2xl font-bold">A</span>
</div>

三個範例展示變形 × 過渡的不同組合。圖片卡片用 group 讓整張卡成為 hover 觸發區，group-hover:scale-110 放大圖片，外層 overflow-hidden 確保放大後不溢出圓角邊界（這一步很重要，否則圖會爆出框）。按鈕同時用 hover:scale-105（浮起）與 active:scale-95（按下凹陷），做出實體按鍵般的回饋，transition-transform duration-150 讓回饋既快又順。圖示則把 scale 與 rotate 疊在一起——在 v4，多個變形 class 直接並列就會自動組合、不互相覆蓋，一次 hover 同時放大又旋轉。

v4 提醒：以上寫法在 v3 需要額外加 transform 開關 class（例如 transform hover:scale-105）才生效。v4 已移除此要求，直接寫 hover:scale-105 即可，遷移時可安全刪掉多餘的 transform。

範例二：translate 絕對置中與旋轉狀態

-translate-x-1/2 -translate-y-1/2 是 CSS 世界最經典的「不知道尺寸也能完美置中」技巧，而 rotate 常用來表達展開／收合狀態：

<!-- 經典絕對置中：先 top/left 50% 定位左上角，再用負向 translate 拉回自身一半 -->
<div class="relative w-full h-56 bg-gray-100 rounded-xl">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
              bg-white rounded-lg shadow-lg px-6 py-4">
    <p class="text-gray-900 font-medium whitespace-nowrap">完美置中</p>
  </div>
</div>

<!-- Accordion 箭頭：展開時旋轉 180 度，transition 讓翻轉平順 -->
<button class="flex items-center justify-between w-full py-4 text-left group">
  <span class="font-medium text-gray-900">常見問題標題</span>
  <svg class="w-5 h-5 text-gray-500 transition-transform duration-200
              group-hover:rotate-180"
       fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
  </svg>
</button>

<!-- 重新整理按鈕：hover 時旋轉一整圈，origin-center 讓它原地打轉 -->
<button class="p-2 rounded-lg hover:bg-gray-100
               hover:rotate-180 transition-transform duration-500">
  <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
  </svg>
</button>

絕對置中是 translate 最重要的應用：top-1/2 left-1/2 先把元素的左上角移到父容器正中央，此時元素會偏右下；再用 -translate-x-1/2 -translate-y-1/2 把它往左上拉回自身寬高的一半，中心就精準落在中央——而且完全不需要知道元素的實際尺寸。Accordion 箭頭用 group-hover:rotate-180 讓向下的箭頭翻成向上，配 transition-transform 平順翻轉，是 FAQ、選單常見的狀態指示。重新整理按鈕則用 hover:rotate-180（也可換成任意值 rotate-[360deg] 轉整圈）配 duration-500 做出旋轉動畫，origin-center（預設）讓它原地打轉。

範例三：v4 3D 翻轉卡片

3D 翻轉卡片是 v4 原生 3D 變形的招牌應用。三件套缺一不可：父層 perspective-* + 翻轉層 transform-3d + 兩面 backface-hidden：

<!-- 父容器設定透視深度，卡片才有近大遠小的立體感 -->
<div class="group [perspective:1000px] w-56 h-72 cursor-pointer">
  <!-- 翻轉層：transform-3d 保留 3D 空間，hover 時繞 Y 軸翻 180 度 -->
  <div class="relative w-full h-full transform-3d
              transition-transform duration-700
              group-hover:rotate-y-180">

    <!-- 正面：backface-hidden 讓翻到背面時看不見它 -->
    <div class="absolute inset-0 backface-hidden
                bg-cyan-500 rounded-2xl shadow-xl
                flex items-center justify-center">
      <span class="text-white text-xl font-bold">正面</span>
    </div>

    <!-- 背面：預先 rotate-y-180 擺正，同樣 backface-hidden -->
    <div class="absolute inset-0 backface-hidden rotate-y-180
                bg-gray-800 rounded-2xl shadow-xl
                flex items-center justify-center">
      <span class="text-white text-xl font-bold">背面</span>
    </div>
  </div>
</div>

這個範例把 3D 三件套完整用上。父容器用 [perspective:1000px]（也可用預設值 perspective-distant）建立觀看深度——這是立體感的來源，少了它 rotate-y-180 只會像被水平壓扁。翻轉層加 transform-3d（transform-style: preserve-3d）讓正反兩面真正存在於 3D 空間，group-hover:rotate-y-180 在 hover 時繞 Y 軸翻半圈，transition-transform duration-700 讓翻轉優雅平順。正反兩面都用 absolute inset-0 疊在同一位置並加 backface-hidden（隱藏背面），背面額外 rotate-y-180 先擺正——這樣卡片轉到正中間（90°）時兩面都不可見、繼續轉才露出背面，形成乾淨俐落的翻面。若想做上下翻，把 rotate-y-180 換成 rotate-x-180 即可。

v4 提醒：整套 3D 變形（perspective-*、transform-3d、rotate-x/y/z-*、translate-z-*、backface-*）是 v4 才原生內建的。在 v3，你必須手寫自訂 CSS（perspective、transform-style: preserve-3d、backface-visibility: hidden）才能做出同樣效果。

常見錯誤與最佳實踐

五個最容易踩的變形坑

坑一：變形沒配 transition，動畫瞬間跳變。 只寫 hover:scale-110 而沒有 transition-transform，滑鼠移入時元素會「啪」地瞬間變大、毫無動畫感。根治法：變形做互動效果時，一定要搭配過渡，最精準的是只過渡變形的 transition-transform（效能最好），需要陰影等一起過渡才用 transition-all。

<!-- ❌ 沒有過渡，hover 時瞬間跳變 -->
<div class="hover:scale-110">卡片</div>

<!-- ✅ 加上 transition，變化平順 -->
<div class="hover:scale-110 transition-transform duration-300">卡片</div>

坑二：3D 旋轉沒有立體感——忘了在父層加 perspective。 直接對元素寫 rotate-y-180 卻沒在父容器加 perspective-*，元素只會像被水平壓扁，完全沒有近大遠小的 3D 感。根治法：3D 旋轉的「父容器」一定要有 perspective-*，翻轉的那一層要有 transform-3d。

<!-- ❌ 沒有 perspective，rotate-y 只是被壓扁 -->
<div class="rotate-y-45">內容</div>

<!-- ✅ 父層 perspective + 子層 transform-3d，才有立體感 -->
<div class="[perspective:800px]">
  <div class="transform-3d rotate-y-45">內容</div>
</div>

坑三：以為 scale 會讓周圍元素補位。 用 scale-50 縮小元素後，周圍卻留下一塊空白、沒有補位——因為 transform 不影響 layout，元素仍佔原始尺寸。根治法：認清變形只是視覺效果；若真要讓版面跟著改變，該動的是 w-*／h-* 或 flex/grid，而非 transform。

坑四：在動畫裡改 top／left／width 做位移，畫面卡頓。 用 hover:top-2 transition-all 讓元素上移看似可行，但改 top 會觸發整個版面重排（layout），是最昂貴的操作，長列表或連續動畫會明顯卡頓。根治法：位移動畫一律用 translate，它只觸發合成（composite）、不重排。

<!-- ❌ 改 top 觸發 layout，效能差 -->
<div class="hover:top-2 transition-all">...</div>

<!-- ✅ 用 translate，只觸發合成，流暢 -->
<div class="hover:-translate-y-2 transition-transform">...</div>

坑五：transform 建立新的 stacking context，z-index 失效。 只要套用任何變形（甚至 translate-z-0），元素就會建立新的 stacking context，子元素的 z-index 被「關」在裡面、無法超出變形父層。根治法：需要跨層堆疊的元素，避免在其祖先掛非必要的變形，或重新規劃堆疊結構。

變形最佳實踐清單

• 變形必配過渡：hover:scale-105 transition-transform duration-200 是 hover 動效的黃金組合，只過渡 transform 效能最好。
• 位移一律用 translate：做上移、滑入、置中，用 translate 而非 top／left（後者觸發 layout、卡頓）。
• 絕對置中背起來：absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2，不用知道尺寸就完美置中。
• 放大圖配 overflow-hidden：group-hover:scale-110 的圖片外層加 overflow-hidden，避免放大時溢出圓角。
• 3D 三件套：父層 perspective-* + 翻轉層 transform-3d + 兩面 backface-hidden，缺一不可。
• 必要時用 transform-gpu：動畫卡頓時，可加 transform-gpu 強制交給 GPU 合成（透過 translateZ(0) 提示），但別濫用、以免佔用過多顯示記憶體。
• 變形不動版面：記住 scale／rotate／translate 只改視覺、不改 layout，需要補位請動尺寸。

小結

這是 TailwindCSS 完整教學 系列的第二十篇。上一篇 《濾鏡》 我們替畫面裝上「鏡頭」、即時調色與做出毛玻璃；而這一篇讓元素真正「動起來」，用變形替互動效果打下最後一塊基礎。回顧幾個重點：

• 2D 變形四件套：scale-*（以 100 為原始大小，負值鏡像）、rotate-*（度數，負值逆時針）、translate-*（spacing scale／分數／負值，含經典絕對置中）、skew-*（錯切），加上 origin-* 控制變形支點。
• v4 3D 變形：perspective-*（父層透視，立體感來源）、transform-3d（保留 3D 空間）、rotate-x/y/z-*、translate-z-*、backface-hidden——三件套組出 3D 翻轉卡片。
• 變形 × 過渡：hover:scale-105 transition-transform 是 hover 動效黃金組合，位移動畫一律用 translate（不觸發 layout），必要時用 transform-gpu 加速。
• 常見陷阱：變形不影響 layout（不補位）、3D 需父層 perspective、變形建立 stacking context 影響 z-index、變形要配過渡才有動畫。
• v3 → v4 差異：變形工具自動組合、不再需要 transform 開關 class，且 v4 全新加入整套原生 3D 變形工具。

元素現在能放大、旋轉、位移、傾斜，甚至翻進第三維空間了。但你可能已經注意到，這一整篇的動效都靠一個關鍵搭檔——transition——才變得平順優雅。下一篇 《過渡與動畫》 會帶你正式掌握 transition（過渡的屬性、時長、緩動曲線）與 animate-*（animate-spin、animate-pulse 及自訂 keyframes），把這一篇打下的變形基礎，變成真正流暢、有生命力的動畫。