目录

CSS 2D 变换

❮ 上一节下一节 ❯

CSS 2D 变换

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

将鼠标悬停在下面的元素上可查看 2D 变换：

2D 旋转

在本章中，您将了解以下 CSS 属性：

transform

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
transform	36.0	10.0	16.0	9.0	23.0

CSS 2D 转换方法

通过CSStransform属性，您可以使用以下 2D 变换方法：

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

提示：您将在下一章中了解 3D 变换。

翻译（）方法

Translate

这个translate()方法将元素从当前位置移动（根据为 X 轴和 Y 轴给出的参数）。

以下示例将 <div> 元素从当前位置向右移动 50 像素，向下移动 100 像素：

示例

div {
transform: translate(50px, 100px);
}

亲自试一试 »

旋转（）方法

Rotate

这个rotate()方法根据给定的角度顺时针或逆时针旋转元素。

以下示例将 <div> 元素顺时针旋转 20 度：

示例

div {
transform: rotate(20deg);
}

亲自试一试 »

使用负值将使元素逆时针旋转。

以下示例将 <div> 元素逆时针旋转 20 度：

示例

div {
transform: rotate(-20deg);
}

亲自试一试 »

scale() 方法

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);
}

亲自试一试 »

矩阵()方法

Rotate

这个matrix()方法将所有 2D 变换方法合二为一。

Matrix() 方法采用六个参数，其中包含数学函数，允许您旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY())

示例

div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

亲自试一试 »

CSS 变换属性

下表列出了所有 2D 变换属性：

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements

CSS 2D 变换方法

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n)	Defines a 2D translation, moving the element along the X-axis
translateY(n)	Defines a 2D translation, moving the element along the Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the elements width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis

❮ 上一节下一节 ❯