CSS 2D 轉換

CSS 2D 轉換

CSS 轉換（transforms）允許您移動、旋轉、縮放和傾斜元素。

把鼠標懸停在下面的元素上，可以查看 2D 轉換：

2D rotate

在本章中，您將學習如下 CSS 屬性：

  • transform

瀏覽器支持

表格中的數字指注明了完全支持該屬性的首個瀏覽器版本。

屬性 Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 2D 轉換方法

通過使用 CSS transform 屬性，您可以利用以下 2D 轉換方法：

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

提示：您將在下一章中學習 3D 轉換。

translate() 方法

Translate

translate() 方法從其當前位置移動元素（根據為 X 軸和 Y 軸指定的參數）。

下面的例子把 <div> 元素從其當前位置向右移動 50 個像素，并向下移動 100 個像素：

實例

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

親自試一試

rotate() 方法

Rotate

rotate() 方法根據給定的角度順時針或逆時針旋轉元素。

下面的例子把 <div> 元素順時針旋轉 20 度：

實例

div {
  transform: rotate(20deg);
}

親自試一試

使用負值將逆時針旋轉元素。

下面的例子把 <div> 元素逆時針旋轉 20 度：

實例

div {
  transform: rotate(-20deg);
}

親自試一試

scale() 方法

Scale

scale() 方法增加或減少元素的大小（根據給定的寬度和高度參數）。

下面的例子把 <div> 元素增大為其原始寬度的兩倍和其原始高度的三倍：

實例

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

親自試一試

下面的例子把 <div> 元素減小為其原始寬度和高度的一半：

實例

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

親自試一試

scaleX() 方法

scaleX() 方法增加或減少元素的寬度。

下面的例子把 <div> 元素增大為其原始寬度的兩倍：

實例

div {
  transform: scaleX(2);
}

親自試一試

以下例子把 <div> 元素縮減為其原始寬度的一半：

實例

div {
  transform: scaleX(0.5);
}

親自試一試

scaleY() 方法

scaleY() 方法增加或減少元素的高度。

下面的例子把 <div> 元素增大到其原始高度的三倍：

實例

div {
  transform: scaleY(3);
}

親自試一試

下面的例子把 <div> 元素縮減為其原始高度的一半：

實例

div {
  transform: scaleY(0.5);
}

親自試一試

skewX() 方法

skewX() 方法使元素沿 X 軸傾斜給定角度。

下例把 <div> 元素沿X軸傾斜 20 度：

實例

div {
  transform: skewX(20deg);
}

親自試一試

skewY() 方法

skewY() 方法使元素沿 Y 軸傾斜給定角度。

下例把 <div> 元素沿 Y 軸傾斜 20 度：

實例

div {
  transform: skewY(20deg);
}

親自試一試

skew() 方法

skew() 方法使元素沿 X 和 Y 軸傾斜給定角度。

下面的例子使 <div> 元素沿 X 軸傾斜 20 度，同時沿 Y 軸傾斜 10 度：

實例

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

親自試一試

如果未指定第二個參數，則值為零。因此，下例使 <div> 元素沿 X 軸傾斜 20 度：

實例

div {
  transform: skew(20deg);
}

親自試一試

matrix() 方法

Rotate

matrix() 方法把所有 2D 變換方法組合為一個。

matrix() 方法可接受六個參數，其中包括數學函數，這些參數使您可以旋轉、縮放、移動（平移）和傾斜元素。

參數如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

實例

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

親自試一試

CSS 轉換屬性

下表列出了所有 2D 變換屬性：

屬性 描述
transform 向元素應用 2D 或 3D 轉換。
transform-origin 允許你改變被轉換元素的位置。

CSS 2D 轉換方法

函數 描述
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉換，沿著 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換，沿著 X 軸移動元素。
translateY(n) 定義 2D 轉換，沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換，沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉換，沿著 Y 軸。