Day 19 - Transform 變形（位移、旋轉、縮放）

18th鐵人賽 day 19 css html 焦糖爆米花

饅頭

團隊第二屆技術創作市集

2026-09-07 12:51:39

103 瀏覽

分享至

昨天介紹了圖片濾鏡與混合模式，透過色彩、亮度和混合效果，讓網頁元素呈現出更多不同的視覺風格。

除了改變元素的顏色與外觀之外，CSS 也能直接調整元素的位置、角度與大小，甚至讓元素產生傾斜或立體的變化。這些效果都可以透過 transform 屬性完成，而且不會影響原本的文件排版。

今天要來介紹 transform 的各種變形功能，包含位移、旋轉、縮放、傾斜，以及變形原點的設定。先學會讓元素改變狀態，明天再進一步讓這些變化動起來！

Transform 變形屬性

transform 屬性可以對元素進行 2D 或 3D 變形，包括位移、旋轉、縮放和傾斜等效果。除了可以微調形狀外，還可以用來製作各種互動效果與動畫。適度使用可創造更具視覺吸引力和互動性的網頁，但過度使用則容易產生視覺干擾或影響瀏覽器顯示效能。

變形函數

Translate 位移

translate() 是 transform 屬性中最常用的功能之一，可以讓元素在不改變文件流的情況下位移。除了在「Day 10 - 元素位移」稍微提過之外，它不只能拿來微調元素置中，在做精確定位或是動畫效果時也非常好用。

.element {
  transform: translate(50px, 20px);  /* X軸和Y軸位移 */
  transform: translateX(50px);       /* 僅X軸位移 */
  transform: translateY(20px);       /* 僅Y軸位移 */
  transform: translateZ(10px);       /* Z軸位移(3D) */
}

Rotate 旋轉

rotate() 函數可以將元素繞著指定點旋轉，常用於創建動態效果或調整元素方向。
角度通常以「度(deg)」為單位，正值表示順時針旋轉，負值則為逆時針旋轉。除了基本的平面旋轉外，還可以在 3D 空間中圍繞特定軸進行旋轉。

.element {
  transform: rotate(45deg);  /* 平面旋轉 */
  transform: rotateX(45deg); /* 繞X軸旋轉(3D) */
  transform: rotateY(45deg); /* 繞Y軸旋轉(3D) */
  transform: rotateZ(45deg); /* 繞Z軸旋轉(3D) */
}

Scale 縮放

scale() 函數可以讓元素按照指定比例縮放，同時影響元素的寬度和高度。縮放值大於 1 表示放大，小於 1 表示縮小。
這個效果常用於懸停狀態的放大效果，或是創建動態的縮放動畫。可以使用不同參數實現等比例或非等比例縮放。

.element {
  transform: scale(1.5);     /* 等比例縮放 */
  transform: scale(1.5, 2);  /* X軸1.5倍，Y軸2倍 */
  transform: scaleX(1.5);    /* 僅X軸縮放 */
  transform: scaleY(2);      /* 僅Y軸縮放 */
}

Skew 傾斜

skew() 函數可以讓元素沿著 X 軸和 Y 軸傾斜，產生傾斜或扭曲的視覺效果。
傾斜角度通常以「度(deg)」為單位，值可以是正數或負數。這種效果常用於製作動態的文字效果或特殊的設計元素。

.element {
  transform: skew(20deg, 10deg);     /* X軸和Y軸傾斜 */
  transform: skewX(20deg);           /* 僅X軸傾斜 */
  transform: skewY(10deg);           /* 僅Y軸傾斜 */
}

組合使用

可以在單一 transform 屬性中組合多個變形效果。
設定時請注意，變形的執行順序會影響最終結果，從左到右依序執行。

.element {
  /* 同時位移、旋轉和縮放 */
  transform: translate(50px, 20px) rotate(45deg) scale(1.2);
}

變形原點

使用 transform-origin 可以設定變形的基準點，特別是在製作動畫或過渡效果時，變形的原點非常重要。
使用前，可以先確認元素的尺寸範圍到哪裡，這樣在設定原點時才能準確知道從哪裡開始變形。

.element {
  transform-origin: center;          /* 中心點(預設) */
  transform-origin: top left;        /* 左上角 */
  transform-origin: 50% 50%;         /* 使用百分比 */
  transform-origin: 20px 40px;       /* 使用像素 */
}