CSS語法 - Transform(變形)

transform屬性能使用translate (移動)、rotate (旋轉)、scale (縮放)、skew (傾斜)。

translate（） 移動

從當前位置移動元素。
數值: 包含單位的數值(例: 50px)。

div {
  transform: translate(50px, 100px);
}

rotation（） 旋轉

根據角度旋轉元素。
數值: 角度(例: 90deg)。

div {
  transform: rotate(90deg);
}

scale（） 縮放

依據數值調整元素的寬高。
數值: 數字(例: 0.5, 2)。

div {
  transform: scale(0.5, 2);
}

scaleX（） 縮放元素的寬度
scaleY（） 縮放元素的高度

skew（） 傾斜

依據角度傾斜元素。
數值: 角度(例: 20deg, 10deg)

div {
  transform: skew(20deg, 10deg);
}

skewX（） 依元素的X軸傾斜
skewY（） 依元素的Y軸傾斜

3D變形

• rotateX() 依角度圍繞元素的X軸來旋轉

  div {
    transform: rotateX(150deg);
  }

• rotateY() 依角度圍繞元素的Y軸來旋轉

  div {
    transform: rotateY(150deg);
  }

• rotateZ() 依角度圍繞元素的Z軸來旋轉

  div {
    transform: rotateZ(150deg);
  }