CSS 2D 变换
CSS 2D 变换
CSS 变换允许您移动、旋转、缩放和倾斜元素。
将鼠标悬停在下面的元素上即可查看二维变换：
在本章中，您将了解以下 CSS 属性：
transform
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 财产 | |||||
|---|---|---|---|---|---|
| 转换 | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 2D 变换方法
使用 CSS transform 属性您可以使用以下二维转换方法：
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
提示： 您将在下一章中学习 3D 变换。
Translation() 方法
这 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 变换属性
下表列出了所有 2D 变换属性：
| 财产 | 描述 |
|---|---|
| 转换 | 对元素应用 2D 或 3D 变换 |
| 变换原点 | 允许您更改转换元素的位置 |
CSS 2D 变换方法
| 功能 | 描述 |
|---|---|
| 矩阵（n,n,n,n,n,n) | 使用六个值的矩阵定义二维变换 |
| 翻译（x,y) | 定义二维平移，沿 X 轴和 Y 轴移动元素 |
| 翻译X（n) | 定义二维平移，沿 X 轴移动元素 |
| 平移Y（n) | 定义二维平移，沿 Y 轴移动元素 |
| 规模（x,y) | 定义二维比例变换，改变元素的宽度和高度 |
| 比例X（n) | 定义二维缩放变换，改变元素的宽度 |
| scaleY(n) | 定义二维缩放变换，改变元素的高度 |
| 旋转（角度) | 定义二维旋转，角度在参数中指定 |
| 倾斜（x 角度,y 角度) | 定义沿 X 轴和 Y 轴的二维倾斜变换 |
| 倾斜X（角度) | 定义沿 X 轴的二维倾斜变换 |
| 倾斜Y（角度) | 定义沿 Y 轴的 2D 倾斜变换 |
