在 CSS 中，transform 是用于用于用于對元素進行幾何變換的屬性，可實現旋轉、縮放、平移、傾斜等效果，且不會影響其他元素的布局（不會觸發重排）。以下是其核心用法和特性：

1. 基本語法

element {transform: 變換函數1(參數) 變換函數2(參數); /* 多個變換可疊加 */transform-origin: x-axis y-axis; /* 變換原點（默認中心） */transition: transform 0.3s; /* 配合過渡實現平滑動畫 */
}

2. 常用變換函數

（1）平移（translate）

• 沿 X/Y 軸移動元素，不影響布局。

   .box {transform: translate(50px, 30px); /* X軸+50px，Y軸+30px */transform: translateX(50px);      /* 僅X軸 */transform: translateY(30px);      /* 僅Y軸 */transform: translateZ(100px);     /* 3D Z軸（需配合perspective） */
  }
  

百分比基于元素自身尺寸：translate(50%, 50%) 表示移動自身寬高的一半。

（2）旋轉（rotate）

• 繞原點旋轉元素，單位為 deg（度）或 rad（弧度）。

  .box {transform: rotate(45deg);      /* 順時針旋轉45度 */transform: rotate(-30deg);     /* 逆時針旋轉30度 */transform: rotateX(60deg);     /* 3D 繞X軸旋轉 */transform: rotateY(60deg);     /* 3D 繞Y軸旋轉 */
  }
  

• 配合 transform-origin: left top; 可改變旋轉中心（如繞左上角旋轉）。

（3）縮放（scale）

• 放大或縮小元素，默認以中心為基準。

  .box {transform: scale(1.5);       /* 寬高均放大1.5倍 */transform: scaleX(0.8);      /* 僅寬度縮小到80% */transform: scaleY(1.2);      /* 僅高度放大到120% */
  }
  

• 負值會翻轉元素（如 scaleX(-1) 水平翻轉）。

（4）傾斜（skew）

• 沿 X/Y 軸傾斜元素，產生扭曲效果。

  .box {transform: skew(20deg, 10deg); /* X軸傾斜20度，Y軸傾斜10度 */transform: skewX(30deg);       /* 僅X軸 */transform: skewY(15deg);       /* 僅Y軸 */
  }
  

（5）矩陣變換（matrix）

• 用矩陣值一次性定義復雜變換（較少直接使用）。

  .box {transform: matrix(1, 0, 0, 1, 50, 30); /* 等價于translate(50px, 30px) */
  }
  

3. 關鍵特性

（1）不影響布局

transform 變換后的元素仍占據原位置（不會改變文檔流），避免了 margin 或 top/left 帶來的重排性能問題。

（2）疊加變換

多個變換函數可按順序疊加（從右到左執行）：

/* 先旋轉45度，再平移50px（注意順序影響結果） */
.box {transform: translate(50px) rotate(45deg);
}

4. 應用場景

（1）懸停動畫

.button {transition: transform 0.3s;
}
.button:hover {transform: scale(1.05) translateY(-3px); /* 輕微放大+上移 */
}

（2）居中對齊

/* 未知尺寸元素水平垂直居中 */
.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 基于自身尺寸偏移 */
}

（3）3D 卡片效果

.card {transition: transform 0.5s;transform-style: preserve-3d;
}
.card:hover {transform: rotateY(180deg); /* 翻轉卡片 */
}

（4）滾動動畫

結合 JavaScript 監聽滾動，動態改變 transform：

window.addEventListener('scroll', function() {const scrollY = window.scrollY;document.querySelector('.box').style.transform = `translateY(${scrollY * 0.5}px)`;
});