CSS 2D 变换
CSS 2D 变换
CSS 变换允许您移动、旋转、缩放和倾斜元素。
将鼠标悬停在下面的元素上以查看 2D 变换
在本节中，您将了解以下 CSS 属性
transform
浏览器支持
表格中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| 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() 方法会将元素从其当前位置移动（根据为 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() 方法将所有二维转换方法组合成一个方法。
matrix() 方法采用六个参数，包含数学函数，这些函数允许您旋转、缩放、移动（平移）和倾斜元素。
参数如下：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
CSS 转换属性
下表列出了所有二维转换属性
| 属性 | 描述 |
|---|---|
| transform | 将二维或三维转换应用于元素 |
| transform-origin | 允许您更改已转换元素的位置 |
CSS 二维转换方法
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 使用六个值的矩阵定义二维转换 |
| translate(x,y) | 定义二维平移，沿 X 轴和 Y 轴移动元素 |
| translateX(n) | 定义二维平移，沿 X 轴移动元素 |
| translateY(n) | 定义二维平移，沿 Y 轴移动元素 |
| scale(x,y) | 定义二维缩放转换，更改元素的宽度和高度 |
| scaleX(n) | 定义二维缩放转换，更改元素的宽度 |
| scaleY(n) | 定义二维缩放转换，更改元素的高度 |
| rotate(angle) | 定义二维旋转，角度在参数中指定 |
| skew(x-angle,y-angle) | 定义沿 X 轴和 Y 轴的二维倾斜转换 |
| skewX(angle) | 定义沿 X 轴的二维倾斜转换 |
| skewY(angle) | 定义沿 Y 轴的二维倾斜转换 |
