文章目录
CSS 2D 变换
CSS 2D 变换
CSS 变换允许您移动、旋转、缩放和倾斜元素。
CSS 2D 变换方法
借助 CSS 变换属性,您可以使用以下 2D 变换方法:
- translate()
- rotate()
- scaleX()
- scaleY()
- scale()
- skewX()
- skewY()
- skew()
- matrix()
Translation() 方法
Translate() 方法将元素从其当前位置移动(根据为 X 轴和 Y 轴指定的参数)。
以下示例将
示例
div {
transform: Translation(50px, 100px);
}
rotate() 方法
rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
以下示例将 <div>
元素顺时针旋转 20 度:
示例
div {
transform: rotate(20deg);
}
使用负值将逆时针旋转元素。
以下示例将 <div>
元素逆时针旋转 20 度:
示例
div {
transform: rotate(-20deg);
}
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() 方法
matrix() 方法将所有 2D 变换方法合并为一个。
matrix() 方法采用六个参数,包含数学函数,允许您旋转、缩放、移动(平移)和倾斜元素。
参数如下:matrix(scaleX(), skewY(), skewX(), scaleY(), TranslationX(), TranslationY())
示例
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) | 定义二维比例变换移动,改变元素的高度 |
rotate(angle) | 定义 2D 旋转,角度在参数中指定 |
skew(x-angle,y-angle) | 定义沿 X 轴和 Y 轴的 2D 倾斜变换 |
skewX(angle) | 定义沿 X 轴的 2D 倾斜变换 |
skewY(angle) | 定义沿 Y 轴的 2D 倾斜变换 |
总结
本文介绍了2D变换Transform 的使用,如有问题欢迎私信和评论