CSS transform 怎麼用：位移、旋轉、縮放、transform-origin，順序為什麼會影響結果

transform 可以把一個元素移動、旋轉、放大縮小、傾斜。它最大的特點是：只改變畫出來的樣子，不影響排版，旁邊的元素不會被推開。所以常用在滑鼠移上去的效果、動畫，和一些排版小技巧。

四個基本動作

.move   { transform: translate(20px, 10px); } /* 往右 20px、往下 10px */
.turn   { transform: rotate(15deg); }         /* 順時針轉 15 度 */
.bigger { transform: scale(1.2); }            /* 放大成 1.2 倍 */
.slant  { transform: skewX(-12deg); }         /* 往右傾斜 */

• translate(x, y)：移動。正數往右、往下，負數往左、往上。
• rotate(角度)：旋轉。正數順時針，負數逆時針。
• scale(倍數)：放大縮小。1 是原本大小，0.5 是一半。
• skewX(角度)：傾斜，做出斜斜的標籤、色塊。

不影響旁邊的元素

實測：一個方塊加上 translate(20px, 10px)，它往右下移了 20、10 像素，但右邊的鄰居位置完全沒變，原本的位置也還留著。

這和 margin 不一樣：用 margin-left: 20px 移動，右邊的元素會被一起推開。要做「滑鼠移上去稍微動一下」的效果，用 transform 才不會讓整排東西跟著跳。

inline 的元素轉不動

<span>、<a> 這類預設是 inline 的元素，加了 transform 沒有效果。實測同一個旋轉 15 度，inline 的 <span> 完全沒轉，改成 display: inline-block 就轉了。display 的差別可以看CSS display 怎麼用。

順序會影響結果

transform 可以一次寫好幾個動作，由左到右依序執行。重點是：每做一個動作，元素自己的「方向」就跟著變了。

/* 一樣的兩個動作，順序不同，結果不同 */
.a { transform: translateX(100px) rotate(90deg); } /* 先往右移，再原地轉 */
.b { transform: rotate(90deg) translateX(100px); } /* 先轉 90 度，「往右」變成往下 */

實測兩個方塊的中心點，和原本位置比較：

• A（先移動再旋轉）：往右移了 100 像素，往下 0。
• B（先旋轉再移動）：往右 0，往下移了 100 像素。

B 先轉了 90 度，它的「右邊」已經變成畫面的「下面」，所以 translateX(100px) 就往下走。寫了兩個以上的動作，結果和想的不一樣時，先檢查順序。一般來說，先寫 translate，再寫 rotate、scale，最符合直覺。

transform-origin：改變軸心

旋轉、縮放預設以元素的正中心為軸心。transform-origin 可以改軸心的位置：

/* 預設以中心點旋轉；改成以左上角當軸心來轉 */
.door {
  transform-origin: left top;
  transform: rotate(-20deg);
}

實測：旋轉之後，方塊的左上角還在原本的位置，整個方塊以左上角為軸轉了 20 度。

transform-origin 可以寫 left、right、top、bottom、center 的組合，也可以寫百分比或像素。例如 transform-origin: right bottom 以右下角為軸，選單從右上角展開時常用 right top。

常用寫法

卡片浮起、圖片放大

/* 卡片：滑鼠移上去往上浮 6px */
.card { transition: transform 0.2s ease; }
.card:hover { transform: translateY(-6px); }

/* 圖片：放大，但不超出外框 */
.thumb { overflow: hidden; border-radius: 12px; }
.thumb img { display: block; width: 100%; transition: transform 0.4s ease; }
.thumb:hover img { transform: scale(1.08); }

• 卡片滑鼠移上去，實測往上浮了 6 像素，下面的內容不會跟著動。
• 圖片放大 1.08 倍，外層 .thumb 加 overflow: hidden，放大的部分被裁掉，實測外框的大小完全沒變，看起來像鏡頭拉近。
• 搭配 transition，移動、放大的過程會有 0.2 到 0.4 秒的變化，比較自然。

分開寫 rotate、scale，就不會互相蓋掉

常見的狀況：貼紙標籤本來就斜 6 度，滑鼠移上去想放大。用 transform 寫的話，:hover 裡的 transform: scale(1.1) 會整個取代原本的 rotate(-6deg)，一移上去標籤就轉正了。

現在可以把 translate、rotate、scale 分開寫：

/* 分開寫的 rotate、scale：滑鼠移上去只改 scale，原本的旋轉不會不見 */
.sticker { rotate: -6deg; transition: scale 0.2s; }
.sticker:hover { scale: 1.1; }

實測：滑鼠移上去後，旋轉還是 -6 度、放大 1.1 倍；舊寫法的標籤則只剩放大，旋轉不見了。分開寫的三個屬性，2022 年起主流瀏覽器都支援。

不知道寬高也能置中

/* 不知道寬高也能置中：先移到中間，再往回退自己寬高的一半 */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top: 50%、left: 50% 是把文字的左上角移到外框中間；translate(-50%, -50%) 的百分比是以文字自己的寬高計算，再往回退一半，正中心就對齊了。實測寬度 1280 和 390 時，文字的中心點和外框的中心點都完全一樣。

延伸閱讀

• CSS display 怎麼用：block、inline、inline-block、none、flex、grid 一次看懂
• CSS 讓 WordPress 留言大頭貼滑過時旋轉：transition 與 transform 寫法
• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法

正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供 RWD 響應式客製化網頁設計，台北與全台客戶也歡迎來聊聊。