上查看所有课程
CSS 2D transform 属性允许元素在二维平面内进行旋转、平移、缩放和倾斜。例如，
div {
transform: rotate(20deg);
}浏览器输出
这里，transform 属性的 rotate() 函数将 div 元素顺时针旋转 20 度。
CSS 2D 变换方法
CSS 2D transform 属性允许我们使用以下变换方法：
translate()：将元素在水平和垂直方向上移动rotate()：使元素顺时针或逆时针旋转scale()：放大或缩小元素的大小skew()：通过沿 x 轴和/或 y 轴倾斜来扭曲元素matrix()：将多种变换方法合并为一种方法
我们来简要地看一下它们。
translate() 方法
translate() 方法沿 x 轴和/或 y 轴移动元素。
translate() 方法的语法是：
transform: translate(x-value,y-value)这里，x-value 和 y-value 表示元素从原始位置移动的水平和垂直距离。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D Translate</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: translate(60px, 20px)</p>
<div class="translate"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* translates the div 60px horizontally and 20px vertically */
div.translate {
transform: translate(60px, 20px);
}浏览器输出
在上面的例子中：
transform: translate(60px, 20px)将第二个 div 元素在初始位置水平移动 60 像素，垂直移动 20 像素。
注意：负值会将元素向相反方向移动。
translateX() 和 translateY() 方法
translateX() 方法
translateX() 方法沿 x 轴移动元素。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D TranslateX</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: translateX(60px)</p>
<div class="translate"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* translates the div element 60px horizontally */
div.translate {
transform: translateX(60px);
}浏览器输出
在上面的例子中：
transform: translateX(60px)将第二个 div 元素在初始位置水平向右移动 60 像素。
translateY() 方法
translateY() 方法沿 y 轴移动元素。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D TranslateY</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: translateY(40px)</p>
<div class="translate"></div>
</body>
</html/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* translates the div element 40px vertically */
div.translate {
transform: translateY(40px);
}浏览器输出
在上面的例子中：
transform: translateY(40px)将第二个 div 元素在初始位置垂直向下移动 40 像素。
rotate() 方法
rotate() 方法使元素按指定角度顺时针或逆时针旋转。
rotate() 方法的语法是：
transform: rotate(degree)角度值应以 deg 关键字后缀。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D Rotate</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: rotate(30deg)</p>
<div class="rotate"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* rotates the div element by 30 degrees */
div.rotate {
transform: rotate(30deg);
}浏览器输出
在上面的例子中：
transform: rotate(30deg)将第二个 div 元素顺时针旋转 30 度。
注意：负角度值使元素逆时针旋转。
rotateX() 和 rotateY() 方法
rotateX() 方法
rotateX() 方法沿 x 轴使元素顺时针或逆时针旋转。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D RotateX</title>
</head>
<body>
<p>Original</p>
<div>Hello</div>
<p>transform: rotateX(180deg)</p>
<div class="rotate">Hello</div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* rotates the div element by 180 degrees along x-axis */
div.rotate {
transform: rotateX(180deg);
}浏览器输出
在上面的例子中：
transform: rotateX(180deg)沿 x 轴将第二个 div 元素顺时针旋转 180 度。
旋转后，第一个 div 中的文本 Hello 会上下颠倒。
rotateY() 方法
rotateY() 方法沿 y 轴使元素顺时针或逆时针旋转。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D RotateY</title>
</head>
<body>
<p>Original</p>
<div>Hello</div>
<p>transform: rotateY(180deg)</p>
<div class="rotate">Hello</div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
font-weight: bold;
text-align: center;
}
/* rotates the div element by 180 degree along y-axis */
div.rotate {
transform: rotateY(180deg);
}浏览器输出
在上面的例子中：
transform: rotateY(180deg)沿 y 轴将第二个 div 元素顺时针旋转 180 度。
旋转后，第一个 div 中的文本 Hello 会出现镜像效果。
scale() 方法
scale() 方法缩放元素，即沿 x 轴和/或 y 轴放大或缩小元素的大小。
scale() 方法的语法是：
transform: scale(x-value, y-value)这里，x-value 和 y-value 分别是沿 x 轴和 y 轴缩放元素的缩放因子。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D Scale</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: scale(2, 0.5)</p>
<div class="scale"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
margin-left:50px;
background-color: red;
border: 1px solid black;
}
/* scales the div element to twice its size in x-axis and half its size in y-axis*/
div.scale {
transform: scale(2, 0.5);
}浏览器输出
在上面的例子中：
transform: scale(2, 0.5)将第二个 div 元素在 x 轴上缩放至原宽度的两倍，在 y 轴上缩放至原高度的一半。
scaleX() 和 scaleY() 方法
scaleX() 方法
scaleX() 方法仅在水平方向上缩放元素，同时保持其高度不变。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D ScaleX</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: scaleX(2)</p>
<div class="scale"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
margin-left: 50px;
}
/* scales the div element to twice its size in x-axis */
div.scale {
transform: scaleX(2);
}浏览器输出
在上面的例子中：
transform: scaleX(2)在 x 轴上将第二个 div 元素的宽度缩放至原宽度的两倍。
scaleY() 方法
scaleY() 方法仅在垂直方向上缩放元素，同时保持其宽度不变。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D ScaleY</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: scaleY(1.5)</p>
<div class="scale"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* scales the div element to 1.5 times of its size along y-axis */
div.scale {
transform: scaleY(1.5);
}浏览器输出
在上面的例子中：
transform:scaleY(1.5)在 y 轴上将元素的高度缩放至原高度的 1.5 倍。
skew() 方法
skew() 方法根据给定的角度沿 x 轴和/或 y 轴倾斜元素。
skew() 方法的语法是：
transform: skew(x-angle,y-angle)这里，x-angle 和 y-angle 分别表示元素沿 x 轴和 y 轴倾斜的度数。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D Skew</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: skew(10deg, 20deg)</p>
<div class="skew"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* skew the div element by 10 degrees along the x-axis and 20 degrees along y-axis */
div.skew {
transform: skew(10deg, 20deg);
}浏览器输出
在上面的例子中：
transform: skew(10deg, 20deg) 将第二个 div 元素沿 x 轴倾斜 10 度，沿 y 轴倾斜 20 度。
这会导致元素在水平和垂直方向上都出现倾斜效果。
注意：倾斜角度可以是正值或负值，具体取决于我们希望倾斜元素的哪个方向。正值使元素向一个方向倾斜，负值则向相反方向倾斜。
skewX() 和 skewY() 方法
skewX() 方法
skewX() 方法根据给定的角度沿 x 轴倾斜元素。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D SkewX</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: skewX(30deg)</p>
<div class="skew"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* skews the div element by 30 degree along x-axis */
div.skew {
transform: skewX(30deg);
}浏览器输出
在上面的例子中：
transform: skewX(30deg))将第二个 div 元素沿 x 轴倾斜 30 度。
skewY() 方法
skewY() 方法根据给定的角度沿 y 轴倾斜元素。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D SkewY</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: skewY(30deg)</p>
<div class="skew"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* skews the div element by 30 degrees along y-axis */
div.skew {
transform: skewY(30deg);
}浏览器输出
在上面的例子中：
transform: skewY(30deg)将第二个 div 元素沿 y 轴倾斜 30 度。
matrix() 方法
matrix() 方法将所有 2D 变换方法组合成一种方法。
matrix() 方法的语法是：
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())matrix() 方法接收六个参数，允许它对元素进行旋转、缩放、平移和倾斜。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS 2D Matrix</title>
</head>
<body>
<p>Original</p>
<div></div>
<p>transform: matrix(1.5, 0.5,- .0.5, 1, 50, 10)</p>
<div class="matrix"></div>
</body>
</html>/* styles both divs */
div {
width: 60px;
height: 50px;
background-color: red;
border: 1px solid black;
}
/* applies matrix transformation to the div element*/
div.matrix {
transform: matrix(1.5, 0.5, -0.5, 1, 50, 10);
}浏览器输出
在上面的例子中：
transform: matrix(1.5, 0.5, -0.5, 1, 50, 10)- 将
div在水平方向上缩放至其宽度的1.5倍 - 将
div在垂直方向上倾斜0.5弧度，产生倾斜效果 - 将
div在垂直方向上倾斜-0.5弧度，产生相反方向的倾斜效果 - 不缩放
div的垂直方向 - 将
div在水平方向上向右平移50像素 - 将
div在垂直方向上向下平移10像素
注意：matrix() 函数中的倾斜值是以弧度为单位指定的，而不是度数。