https://benzhub.github.io/tags/%E8%AE%8A%E5%BD%A2/Recent content in 變形 on BenzHubHugozh-TWThu, 20 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/020-transforms/Thu, 20 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/020-transforms/<blockquote> <p>上一篇替畫面裝上了「鏡頭」，這一篇讓元素真正「動起來」。<strong>TailwindCSS</strong> 的變形（<strong>Transform</strong>）系統涵蓋 <code>scale</code>（縮放）、<code>rotate</code>（旋轉）、<code>translate</code>（位移）、<code>skew</code>（傾斜）四種 2D 變形，以及 <code>transform-origin</code>（變形原點），讓你不改動版面就能放大、旋轉、位移、傾斜任何元素。而 <strong>v4</strong> 更新增了一整套原生 3D 變形工具——<code>perspective</code>、<code>rotate-x/y/z</code>、<code>translate-z</code>、<code>transform-3d</code>、<code>backface</code>——過去要靠自訂 CSS 才能做的卡片翻轉、3D 傾斜，現在用純 class 就能完成。搭配過渡（transition），變形正是 hover 放大、翻轉卡片、滑入動畫等互動效果的核心引擎。</p> </blockquote>