使用纯HTML/CSS实现令人惊叹的3D效果

WBOLT_COM 9 月 21, 2023 1k+ 0

HTML 和 CSS 可能是二维网页设计的基石，但在它们的虚拟工具箱中却隐藏着创建令人惊叹的三维视角的秘密。试想一下，在制作交互界面时，如何超越平面，进入一个 X、Y 和 Z 轴共舞的世界。在本篇博文中，我们将为您揭开 HTML 和 CSS 3D 功能的神奇面纱，指导您使用基本属性和技术来创建令人惊叹的 3D 视觉效果。

比如这个：

在 HTML 中利用透视技术

虽然 HTML 和 CSS 主要用于构建 2D 布局，但仍有 3 个轴（X、Y 和 Z）可以通过特定的 CSS 属性创建透视图。

perspective 属性

perspective（透视）属性通过沿 Z 轴调整消失点的位置来改变用户的视角。

例如，使用以下代码片段将在用户和平面（Z 轴）之间建立 800px 的距离。

.perspective {
position: relative;
perspective: 800px;
}

<div></div>

perspective-origin 属性

perspective-origin（透视原点）属性决定了用户沿 X 轴和 Y 轴的位置。

要从上方查看对象，可以使用以下代码：

.perspective {
position: relative;
perspective: 800px;
perspective-origin: 50% -200px;
}

在本例中，我们将 X 轴居中（50%），Y 轴的位置为 -200px。

现在，您已经掌握了 HTML 和 CSS 中的 3D 要素，让我们开始创建自己的 3D 立方体吧！

1. 打好基础

在 HTML 结构中，我们将构建一个透视平面，并为立方体的每个面添加一个 div 元素。

<div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

现在，让我们为透视平面赋予一个特定的视角。在我们的案例中，我们希望看到立方体的俯视图。

.perspective {
perspective: 800px;
perspective-origin: 50% -200px;
}

然后，我们将为方框指定尺寸，并为各个面应用样式。为了在 div 中的透视平面内保持 3D 渲染，我们使用了 transform-style: preserve-3d 。

.box {  
width: var(--size);
aspect-ratio: 1;  
position: relative;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: var(--size);
aspect-ratio: 1;
background-color: hsl(
39,
100%,
66%
);
transform-style: preserve-3d;
}

这时，你会看到所有的面都叠加在同一位置，形成一个正方形。

正方形图形

2. 制作图案

现在，让我们制作立方体的二维图案，然后像折纸一样将其折叠。此外，我们还将加入旋转动画，以获得更好的 3D 可视化效果。

创建图案可以简化旋转和精确定位元素的过程，防止倒置面的混淆。

.box {  
animation: rotate 4s linear infinite;
}
.face.front {
}
.face.bottom {
top: 100%;
}
.face.top {
bottom: 100%;
}
.face.back {
bottom: 200%;
}
.face.right {
left: 100%;
}
.face.left {
right: 100%;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotateY(360deg);
}
}

现在，你应该看到一个十字形的配置：

3. 折叠表面制作立方体

下一步是折叠面以创建立方体效果。这需要使用 rotateX() 、 rotateY() 并通过 transform-origin 指定折叠的顶点。

对于背面，我们需要调整 Y 轴和 Z 轴的 transform-origin，因为它与正面相距两个面。

.face.front {
}
.face.bottom {
top: 100%;
transform-origin: top;
transform: rotateX(-90deg);
}
.face.top {
bottom: 100%;
transform-origin: bottom;
transform: rotateX(90deg);
}
.face.back {
bottom: 200%;
transform-origin: center 150px -50px;
transform: rotateX(180deg);
}
.face.right {
left: 100%;
transform-origin: left;
transform: rotateY(90deg);
}
.face.left {
right: 100%;
transform-origin: right;
transform: rotateY(-90deg);
}

4.为面部添加阴影

为了获得较为逼真的 3D 效果，我们需要为面部添加阴影。虽然 CSS 缺乏原生光照，但我们可以通过改变颜色的明暗度来营造出深度的错觉。

我们将利用 hsl() 的 lightness 属性为每个面孔创建不同的阴影。

.face {  
background-color: hsl(
39,
100%,
var(--lightness)
);
}
.face.front {
--lightness: 66%;
}
.face.bottom {
--lightness: 74%;
}
.face.top {
--lightness: 74%;
}
.face.back {
--lightness: 78%;
}
.face.right {
--lightness: 70%;
}
.face.left {
--lightness: 70%;
}

现在，你将看到一个绚丽的 3D 立方体，它完全由 HTML 和 CSS 制作而成！

希望本教程能点燃你的想象力，用纯 HTML 和 CSS 制作出迷人的 3D 动画。

评论收藏点赞