CSS - 3D 变换：为您的网页设计增添深度

你好，未来的网页设计师们！今天，我们将踏上一段激动人心的旅程，探索 CSS 3D 变换的世界。作为你友好的计算机老师，我很高兴能引导你了解这个迷人的主题。如果你是编程新手，不用担心——我们将从基础开始，逐步深入。在本课结束时，你将能够创作出使你的网站焕然一新的 3D 杰作！

CSS 3D 变换是什么？

想象你手中拿着一张纸。在网页设计的世界中，这就是你的典型 2D 网页。现在，如果你能够折叠这张纸，扭曲它，或者让它站起来呢？这正是 CSS 3D 变换允许我们做的——对我们的网页元素进行操作！

CSS 3D 变换赋予我们操作三维空间中元素的能力。我们可以沿 X、Y 和 Z 轴旋转、平移（移动）和缩放元素。Z 轴是给我们的设计增加深度的轴，使元素看起来更接近或更远。

舞台设置：Transform 属性

在我们跳入三维世界之前，让我们快速回顾一下 transform 属性。这是我们用来应用 3D 变换的魔法棒。

.element {
transform: function(value);
}

在这个语法中，function 是我们想要应用的变换类型，value 是我们想要变换元素的程度。

变换函数

现在，让我们看看我们手头的主要 3D 变换函数：

函数	描述	示例
translate3d(x,y,z)	在三维空间中移动元素	transform: translate3d(10px, 20px, 30px);
translateZ(z)	沿 Z 轴移动元素	transform: translateZ(30px);
scale3d(x,y,z)	在三维空间中缩放元素	transform: scale3d(1.5, 1.5, 2);
scaleZ(z)	沿 Z 轴缩放元素	transform: scaleZ(2);
rotate3d(x,y,z,angle)	在三维空间中旋转元素	transform: rotate3d(1, 1, 1, 45deg);
rotateX(angle)	围绕 X 轴旋转元素	transform: rotateX(45deg);
rotateY(angle)	围绕 Y 轴旋转元素	transform: rotateY(45deg);
rotateZ(angle)	围绕 Z 轴旋转元素	transform: rotateZ(45deg);
perspective(n)	设置视距	transform: perspective(1000px);

别担心这些看起来令人畏惧——我们会逐一通过示例来分解！

开始变换！

三维平移

让我们从使用 translate3d 在三维空间中移动元素开始：

.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate3d(50px, 30px, 20px);
}

在这个示例中，我们的盒子向右移动 50px，向下移动 30px，并向观察者方向移动 20px。就像盒子在屏幕上漂浮起来一样！

三维缩放

现在，让我们让我们的盒子在三维空间中变大或缩小：

.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale3d(1.5, 1.5, 2);
}

这个变换使我们的盒子在宽度和高度上变为原来的 1.5 倍，并且在深度上变为原来的两倍。

三维旋转

在三维空间中旋转元素可以创建一些非常酷的效果：

.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}

这个盒子正在做一个小舞蹈，围绕 X 轴旋转 45 度，围绕 Y 轴旋转 30 度，并且围绕 Z 轴旋转 60 度！

视距的重要性

现在，事情变得非常有趣。要真正欣赏 3D 变换，我们需要添加视距。想象视距是观察者和对象之间的距离。

.container {
perspective: 1000px;
}

.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotateY(45deg);
}

在这个示例中，我们给容器添加了视距。现在当我们旋转盒子时，它看起来更三维！

一切结合：一个 3D 立方体

让我们将我们学到的所有内容结合起来，创建一个 3D 立方体：

<div class="scene">
<div class="cube">
<div class="face front">前面</div>
<div class="face back">后面</div>
<div class="face right">右面</div>
<div class="face left">左面</div>
<div class="face top">顶面</div>
<div class="face bottom">底面</div>
</div>
</div>

.scene {
width: 200px;
height: 200px;
perspective: 600px;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}

.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}

.front  { background: rgba(255,0,0,0.7);   transform: rotateY(  0deg) translateZ(100px); }
.right  { background: rgba(0,255,0,0.7);   transform: rotateY( 90deg) translateZ(100px); }
.back   { background: rgba(0,0,255,0.7);   transform: rotateY(180deg) translateZ(100px); }
.left   { background: rgba(255,255,0,0.7); transform: rotateY(-90deg) translateZ(100px); }
.top    { background: rgba(255,0,255,0.7); transform: rotateX( 90deg) translateZ(100px); }
.bottom { background: rgba(0,255,255,0.7); transform: rotateX(-90deg) translateZ(100px); }

.cube:hover {
transform: translateZ(-100px) rotateX(-90deg) rotateY(-45deg);
}

这段代码创建了一个多彩的 3D 立方体，当鼠标悬停时，它会旋转。很酷吧？

结论

那么，伙计们，以上就是 CSS 3D 变换的精彩世界。从简单的平移到创建一个完整的 3D 立方体，你现在有了为你的网页设计增加深度和维度的能力。

记住，掌握 3D 变换的关键是练习。不要害怕尝试不同的值和组合。谁知道呢？你可能会创造出下一个网络设计的大热门！

在我们结束之前，我想起了一句著名建筑师弗兰克·劳埃德·赖特的名言：“空间是艺术的呼吸。”有了 CSS 3D 变换，你现在有了使你的网络空间生动起来的工具。所以，勇敢地前进，创造惊人的 3D 体验吧！

快乐编码，愿你的网页设计永远充满深度！

Credits: Image by storyset