上查看所有课程
CSS 3D 变换属性允许在三维平面中旋转、移动和缩放元素。例如，
Rotate2d
Rotate3d
在这里，我们可以看到二维平面和三维平面旋转之间的区别。
CSS 3D 变换方法
CSS 3D transform 属性允许我们使用以下变换方法：
translate3d()rotate3d()scale3d()
为了可视化 3D 变换方法的效果，我们需要使用 perspective 属性。此属性允许我们定义查看者与 3D 变换元素之间的虚拟距离。
perspective 属性的语法是：
perspective: length_value;perspective 属性接受一个 length value，该值指示查看者到包含变换元素的 3D 平面的距离。
我们将简要介绍每种方法。
translate3d() 方法
translate3d() 方法沿 x、y 和 z 轴在三维空间中移动元素。
translate3d() 方法的语法是：
transform: translate3d(x-value,y-value,z-value)在这里，x-value、y-value 和 z-value 表示元素沿 x、y 和 z 轴从原始位置移动的距离。
让我们看一个例子，
<!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 3D Translate</title>
</head>
<body>
<div class="original">
<div class="translate"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
border: 4px solid black;
perspective: 800px;
}
/* styles div with translate class */
div.translate {
width: 100px;
height: 100px;
background-color: orange;
transform: translate3d(50px, 20px, 30px);
}浏览器输出
在上面的例子中：
transform: translate3d(50px, 20px, 30px) 将内部 div 元素在水平方向上移动 50 像素，在垂直方向上移动 20 像素，并从初始位置向外移动 30 像素。
注意：负值表示元素向相反方向移动。
translateX()、translateY() 和 translateZ() 方法
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 3D TranslateX</title>
</head>
<body>
<div class="original">
<div class="translate"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
border: 4px solid black;
perspective: 800px;
}
/* styles div with translate class */
div.translate {
width: 100px;
height: 100px;
background-color: orange;
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 3D TranslateY</title>
</head>
<body>
<div class="original">
<div class="translate"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
border: 4px solid black;
perspective: 800px;
}
/* styles div with translate class */
div.translate {
width: 100px;
height: 100px;
background-color: orange;
transform: translateY(30px);
}浏览器输出
在上面的例子中：
transform: translateY(40px)将内部 div 元素在三维空间中从其原始位置向下垂直移动 40 像素。
translateZ() 方法
translateZ() 方法在三维空间中沿 z 轴移动元素。例如，
<!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 3D TranslateZ</title>
</head>
<body>
<div class="original">
<div class="translate"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
border: 4px solid black;
perspective: 80px;
}
/* styles div with translate class */
div.translate {
width: 100px;
height: 100px;
background-color: orange;
transform: translateZ(-20px);
}浏览器输出
在上面的例子中：
transform: translateZ(-20px)将内部 div 元素在三维空间中向内（远离查看者）移动 20 像素。
rotate3d() 方法
rotate3d() 方法以顺时针或逆时针方向在三维平面中旋转元素。
rotate3d() 方法的语法是：
transform: rotate3d(x, y, z, angle)这里，
x、y和z表示旋转轴；1 表示在该轴上发生旋转，0 表示沿该轴不发生旋转。angle表示旋转的角度。
让我们看一个例子，
<!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 3D Rotate</title>
</head>
<body>
<div class="original">
<div class="rotate"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
margin: 50px;
border: 4px solid black;
perspective: 80px;
}
/* styles div with rotate class */
div.rotate {
width: 100px;
height: 100px;
background-color: orange;
transform: rotate3d(1, 1, 1, 30deg);
}浏览器输出
在上面的例子中：
transform: rotate3d(1, 1, 1, 30deg) 将内部 div 元素沿三个轴以顺时针方向旋转 30 度。
注意：负角度表示元素沿逆时针方向旋转。
rotateX()、rotateY() 和 rotateZ() 方法
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 3D RotateX</title>
</head>
<body>
<div class="original">
<div class="rotate"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
border: 4px solid black;
perspective: 80px;
}
/* styles div with rotate class */
div.rotate {
width: 100px;
height: 100px;
background-color: orange;
transform: rotateX(30deg);
}浏览器输出
在上面的例子中：
transform: rotateX(30deg) 将内部 div 元素在 3D 空间中沿 x 轴以顺时针方向旋转 30 度。
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 3D RotateY</title>
</head>
<body>
<div class="original">
<div class="rotate"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
border: 4px solid black;
perspective: 80px;
margin: 50px;
}
/* styles div with rotate class */
div.rotate {
width: 100px;
height: 100px;
background-color: orange;
transform: rotateY(30deg);
}浏览器输出
在上面的例子中：
transform:rotateY(30deg) 将内部 div 元素在 3D 空间中沿 y 轴以顺时针方向旋转 30 度。
rotateZ() 方法
rotateZ() 方法在三维空间中沿 z 轴旋转元素。例如，
<!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 3D RotateZ</title>
</head>
<body>
<div class="original">
<div class="rotate"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
margin: 50px;
border: 4px solid black;
perspective: 80px;
}
/* styles div with rotate class */
div.rotate {
width: 100px;
height: 100px;
background-color: orange;
transform: rotateZ(30deg);
}浏览器输出
在上面的例子中：
transform: rotateZ(30deg) 将内部 div 元素在 3D 空间中沿 z 轴以顺时针方向旋转 30 度。
scale3d() 方法
scale3d() 方法在三维空间中沿所有轴缩放元素，即增加或减小元素的大小。它会改变元素的宽度、高度和深度。
scale3d() 的语法是：
transform: scale3d(x, y, z)
在这里，x、y 和 z 分别是沿 x 轴、y 轴和 z 轴缩放元素的缩放因子。
让我们看一个例子，
<!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 3D Scale</title>
</head>
<body>
<div class="original">
<div class="scale"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
margin: 50px;
border: 4px solid black;
perspective: 800px;
}
/* styles div with scale class */
div.scale {
width: 100px;
height: 100px;
background-color: orange;
transform: scale3d(1, 2, 5) rotateX(45deg);
}浏览器输出
在上面的例子中：
transform: scale3d(1, 2, 5) 将内部 div 元素的宽度保持不变，高度加倍，深度增加五倍。
注意：rotateX() 函数增强了 3D 缩放的视觉效果。
scaleX()、scaleY() 和 scaleZ() 方法
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 3D ScaleX</title>
</head>
<body>
<div class="original">
<div class="scale"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
margin: 50px;
border: 4px solid black;
perspective: 80px;
}
/* styles div with scale class */
div.scale {
width: 100px;
height: 100px;
background-color: orange;
transform: scaleX(2);
}浏览器输出
在上面的例子中：
transform: scaleX(2) 将内部 div 元素的宽度沿 x 轴放大到原来的两倍，同时保持高度和深度不变。
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 3D ScaleY</title>
</head>
<body>
<div class="original">
<div class="scale"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
margin: 50px;
border: 4px solid black;
perspective: 80px;
}
/* styles div with scale class */
div.scale {
width: 100px;
height: 100px;
background-color: orange;
transform: scaleY(1.5);
}浏览器输出
在上面的例子中：
transform: scaleY(1.5) 将内部 div 元素的高度沿 y 轴放大到原来的 1.5 倍，同时保持宽度和深度不变。
scaleZ() 方法
scaleZ() 方法沿 z 轴缩放元素，同时保持其他轴不变。例如，
<!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 3D ScaleZ</title>
</head>
<body>
<div class="original">
<div class="scale"></div>
</div>
</body>
</html>/* styles original div */
div.original {
width: 100px;
height: 100px;
margin: 50px;
border: 4px solid black;
perspective: 800px;
}
/* styles div with scale class */
div.scale {
width: 100px;
height: 100px;
background-color: orange;
transform: scaleZ(10) rotateX(45deg);
}浏览器输出
在上面的例子中：
transform: scaleZ(10)将内部 div 元素的深度沿 z 轴放大到原来的 10 倍，同时保持宽度和高度不变。
注意：scaleZ() 函数仅沿 z 轴缩放。因此，我们需要将其与其他变换方法结合使用才能可视化变换的完整效果。