CSS transform 變形

transform 屬性可以對元素進行變形操作，包括平移、旋轉、縮放和傾斜，而不會影響周圍元素的佈局。

translate（平移）

移動元素的位置。

.box {
  transform: translateX(50px);     /* 向右移動 50px */
  transform: translateY(30px);     /* 向下移動 30px */
  transform: translate(50px, 30px); /* X 和 Y 同時 */
}

負值會往反方向移動：

.box {
  transform: translateX(-50px);    /* 向左移動 */
  transform: translateY(-30px);    /* 向上移動 */
}

使用百分比會根據元素自身大小計算：

.box {
  transform: translate(-50%, -50%);  /* 向左上移動自身寬高的 50% */
}

rotate（旋轉）

旋轉元素，正值順時針，負值逆時針。

.box {
  transform: rotate(45deg);       /* 順時針旋轉 45 度 */
  transform: rotate(-45deg);      /* 逆時針旋轉 45 度 */
  transform: rotate(0.5turn);     /* 旋轉半圈 */
}

3D 旋轉

.box {
  transform: rotateX(45deg);      /* 沿 X 軸旋轉 */
  transform: rotateY(45deg);      /* 沿 Y 軸旋轉 */
  transform: rotateZ(45deg);      /* 沿 Z 軸旋轉（等同 rotate） */
}

scale（縮放）

縮放元素大小，1 是原始大小。

.box {
  transform: scale(1.5);          /* 放大 1.5 倍 */
  transform: scale(0.5);          /* 縮小為 0.5 倍 */
  transform: scaleX(2);           /* 只縮放寬度 */
  transform: scaleY(0.8);         /* 只縮放高度 */
  transform: scale(2, 0.5);       /* X 放大 2 倍，Y 縮小 0.5 倍 */
}

負值會產生鏡像效果：

.flip-horizontal {
  transform: scaleX(-1);          /* 水平翻轉 */
}

.flip-vertical {
  transform: scaleY(-1);          /* 垂直翻轉 */
}

skew（傾斜）

傾斜元素。

.box {
  transform: skewX(20deg);        /* 水平傾斜 */
  transform: skewY(10deg);        /* 垂直傾斜 */
  transform: skew(20deg, 10deg);  /* X 和 Y 同時 */
}

組合多個變形

用空格分隔，可以同時套用多個變形：

.box {
  transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

transform-origin（變形原點）

設定變形的參考點，預設是元素中心。

.box {
  transform-origin: center;           /* 預設，中心點 */
  transform-origin: top left;         /* 左上角 */
  transform-origin: bottom right;     /* 右下角 */
  transform-origin: 50% 50%;          /* 中心（等同 center） */
  transform-origin: 0 0;              /* 左上角 */
  transform-origin: 100% 100%;        /* 右下角 */
}

旋轉原點範例

/* 以左上角為中心旋轉 */
.rotate-corner {
  transform-origin: top left;
  transform: rotate(45deg);
}

/* 以底部中心為中心旋轉 */
.rotate-bottom {
  transform-origin: bottom center;
  transform: rotate(45deg);
}

3D 變形

perspective（透視）

設定 3D 變形的透視距離，讓 3D 效果更明顯。

.container {
  perspective: 1000px;    /* 在父元素設定 */
}

.box {
  transform: perspective(1000px) rotateY(45deg);  /* 或在元素本身設定 */
}

translate3d

.box {
  transform: translate3d(50px, 30px, 100px);  /* X, Y, Z */
  transform: translateZ(100px);               /* 只設 Z 軸 */
}

transform-style

讓子元素保持 3D 空間：

.container {
  transform-style: preserve-3d;
}

實用範例

置中（絕對定位）

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hover 放大效果

.card {
  transition: transform 0.3s;
}

.card:hover {
  transform: scale(1.05);
}

按鈕點擊效果

.button {
  transition: transform 0.1s;
}

.button:active {
  transform: scale(0.95);
}

圖片 Hover 效果

.image-container {
  overflow: hidden;
}

.image-container img {
  transition: transform 0.3s;
}

.image-container:hover img {
  transform: scale(1.1);
}

旋轉圖示

.icon {
  transition: transform 0.3s;
}

.icon:hover {
  transform: rotate(180deg);
}

卡片翻轉

.card-container {
  perspective: 1000px;
}

.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

效能考量

transform 是效能較好的動畫屬性，因為它不會觸發重排 (reflow)。建議在動畫中優先使用：

• transform
• opacity

避免動畫 width、height、margin、padding 等會觸發重排的屬性。