CSS 2D 變換
CSS 2D 變換
CSS 變換允許你移動、旋轉、縮放和傾斜元素。
將滑鼠懸停在下面的元素上，檢視 2D 變換效果
在本章中，你將學習以下 CSS 屬性
轉換
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| 轉換 | 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() 方法根據給定的 X 軸和 Y 軸引數，將元素從當前位置移動。
以下示例將 <div> 元素向右移動 50 畫素，並向下移動 100 畫素，相對於其當前位置：
rotate() 方法
rotate() 方法根據給定的角度，順時針或逆時針旋轉元素。
以下示例將 <div> 元素順時針旋轉 20 度：
使用負值將使元素逆時針旋轉。
以下示例將 <div> 元素逆時針旋轉 20 度：
scale() 方法
scale() 方法根據給定的寬度和高度引數，增加或減小元素的大小。
以下示例將 <div> 元素的寬度增加到原始寬度的兩倍，高度增加到原始高度的三倍：
以下示例將 <div> 元素的寬度和高度減小到原來的一半：
scaleX() 方法
scaleX() 方法增加或減小元素的寬度。
以下示例將 <div> 元素的寬度增加到其原始寬度的兩倍：
以下示例將 <div> 元素的寬度減小到其原始寬度的一半：
scaleY() 方法
scaleY() 方法增加或減小元素的高度。
以下示例將 <div> 元素的高度增加到其原始高度的三倍：
以下示例將 <div> 元素的高度減小到其原始高度的一半：
skewX() 方法
skewX() 方法沿 X 軸按給定角度傾斜元素。
以下示例將 <div> 元素沿 X 軸傾斜 20 度：
skewY() 方法
skewY() 方法沿 Y 軸按給定角度傾斜元素。
以下示例將 <div> 元素沿 Y 軸傾斜 20 度：
skew() 方法
skew() 方法沿 X 和 Y 軸按給定角度傾斜元素。
以下示例將 <div> 元素沿 X 軸傾斜 20 度，沿 Y 軸傾斜 10 度：
如果未指定第二個引數，則其值為零。因此，以下示例將 <div> 元素沿 X 軸傾斜 20 度：
matrix() 方法
matrix() 方法將所有 2D 變換方法組合在一起。
matrix() 方法接受六個引數，包含數學函式，允許你旋轉、縮放、移動（平移）和傾斜元素。
引數如下：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
CSS 變換屬性
下表列出了所有 2D 變換屬性
| 屬性 | 描述 |
|---|---|
| 轉換 | 對元素應用 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(角度) | 定義 2D 旋轉，角度在引數中指定 |
| skew(x-angle,y-angle) | 定義沿 X 軸和 Y 軸的 2D 傾斜變換 |
| skewX(角度) | 定義沿 X 軸的 2D 傾斜變換 |
| skewY(角度) | 定義沿 Y 軸的 2D 傾斜變換 |
