前端必知必会-2D变换Transform

---

CSS 2D 变换

CSS 2D 变换
CSS 变换允许您移动、旋转、缩放和倾斜元素。

CSS 2D 变换方法

借助 CSS 变换属性，您可以使用以下 2D 变换方法：

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

Translation() 方法

Translate() 方法将元素从其当前位置移动（根据为 X 轴和 Y 轴指定的参数）。

以下示例将

元素从其当前位置向右移动 50 像素，向下移动 100 像素：

示例

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 的使用，如有问题欢迎私信和评论