CSS3 3D 转换为网页元素提供了更复杂的三维效果，能够让你实现更加生动的视觉效果。通过 3D 转换，你可以在三维空间中对元素进行旋转、平移、缩放等操作。与 2D 转换相比，3D 转换添加了一个深度维度，使得页面效果更加立体。
1. 基本的 3D 转换属性
与 2D 转换一样，3D 转换也使用 transform 属性，不过它涉及到的操作会有深度维度（z轴）。常用的 3D 转换包括：旋转（rotate）、平移（translate）、缩放（scale）等。
1.1 rotateX、rotateY、rotateZ
这些属性用于沿 X、Y 或 Z 轴旋转元素。
div {
transform: rotateX(45deg); /* 沿 X 轴旋转 45 度 */
}div {
transform: rotateY(30deg); /* 沿 Y 轴旋转 30 度 */
}div {
transform: rotateZ(60deg); /* 沿 Z 轴旋转 60 度 */
}1.2 translateZ
translateZ 用于沿 Z 轴移动元素，可以模拟元素远近的效果。
div {
transform: translateZ(100px); /* 向屏幕外移动 100 像素 */
}1.3 scale3d
scale3d 用于在 3D 空间中缩放元素，允许你在三个轴上进行不同程度的缩放。
div {
transform: scale3d(1.5, 1.5, 1.5); /* 同时沿 X, Y, Z 轴缩放 1.5 倍 */
}2. 设置 3D 上下文
在进行 3D 转换时，perspective 属性用于设置视图的深度，使 3D 转换效果更加明显。通过 perspective，你可以控制观察者与元素之间的距离，从而影响深度感。
.container {
perspective: 500px; /* 设置 3D 视距 */
}perspective 值越小，元素看起来越接近观众，深度感越强；值越大，元素看起来越远，深度感越弱。
3. transform-style
transform-style 定义了子元素如何在 3D 空间中呈现。默认情况下，所有元素都是平面的；要使用 3D 效果，必须将元素设置为 preserve-3d，以保持其 3D 空间中的立体效果。
.container {
transform-style: preserve-3d; /* 保持子元素的 3D 空间 */
}4. 多重 3D 转换
你可以将多个 3D 转换组合在一起，以创建复杂的 3D 效果。
div {
transform: rotateX(45deg) rotateY(30deg) translateZ(200px);
}这个例子中，元素首先沿 X 轴旋转 45 度，然后沿 Y 轴旋转 30 度，最后沿 Z 轴平移 200px。
5. 使用 3D 转换和过渡
你可以将 transition 或 animation 与 3D 转换结合使用，使得元素的 3D 效果更平滑或具有动画感。
div {
transition: transform 1s;
}
div:hover {
transform: rotateY(180deg) translateZ(200px);
}当鼠标悬停在 div 上时，元素会平滑地旋转 180 度，并沿 Z 轴移动 200 像素。
综合实例：创建一个 3D 翻转卡片
下面是一个使用 3D 转换创建卡片翻转效果的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 3D 转换</title>
<style>
.container {
perspective: 1000px; /* 设置 3D 视距 */
width: 300px;
height: 400px;
}
.card {
width: 100%;
height: 100%;
background: #3498db;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card:hover {
transform: rotateY(180deg);
}
.card .front, .card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 隐藏背面 */
}
.card .back {
background: #e74c3c;
transform: rotateY(180deg); /* 背面旋转 180 度 */
}
.card .front {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="front">Front</div>
<div class="back">Back</div>
</div>
</div>
</body>
</html>这个实例通过 perspective 创建了一个 3D 空间，使得当用户将鼠标悬停在卡片上时，它会进行 180 度的翻转，显示背面。
总结
CSS3 的 3D 转换允许你通过平移、旋转、缩放等方式在三维空间中操控元素，能够为网页增添非常生动的效果。通过结合 perspective、transform-style 等属性，你可以为网页创造出令人印象深刻的视觉体验。