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

2025-06-07

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

HTML 和 CSS 或许是 2D 网页设计的基石，但它们的虚拟工具箱中却隐藏着创造惊艳 3D 视角的秘诀。想象一下，设计一个超越平面、进入 X、Y、Z 轴交相辉映的交互式界面。在这篇博文中，我们将揭开 HTML 和 CSS 3D 功能的魔力，引导您了解创建惊艳 3D 视觉效果的基本属性和技巧。

喜欢这个！

介绍

利用 HTML 中的透视

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

该perspective物业

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

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



.perspective {
  position: relative;
  perspective: 800px;
}
Enter fullscreen mode Exit fullscreen mode 


<div class="perspective"></div>
Enter fullscreen mode Exit fullscreen mode

该perspective-origin物业

perspective -origin属性确定用户沿 X 轴和 Y 轴的位置。

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



.perspective {
  position: relative;
  perspective: 800px;
  perspective-origin: 50% -200px;
}
Enter fullscreen mode Exit fullscreen mode

在这个例子中，我们以 X 轴为中心（50%），以 Y 轴为位置 -200px。

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

1. 打好基础

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



<div class="perspective">
  <div class="box">
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face back"></div>
    <div class="face front"></div>
    <div class="face left"></div>
    <div class="face right"></div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

现在，让我们为透视平面注入一个特定的视角。在本例中，我们想要一个立方体的俯视图。



.perspective {
  perspective: 800px;
  perspective-origin: 50% -200px;
}
Enter fullscreen mode Exit fullscreen mode

然后，我们将为盒子指定尺寸，并为各个面应用样式。为了使 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;
}
Enter fullscreen mode Exit fullscreen mode

此时，您应该看到所有面都叠加在同一位置，形成一个正方形。

结果图片

2.创建图案

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

创建图案可以简化旋转和准确定位元素的过程，避免与倒置面混淆。




.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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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

3. 折叠面来制作立方体

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

对于背面，我们需要调整transform-originY 轴和 Z 轴，因为它位于距离正面两个面的位置。



.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);
}
Enter fullscreen mode Exit fullscreen mode

4. 为面部添加阴影

为了实现逼真的 3D 效果，我们需要在表面添加阴影。虽然 CSS 本身不支持光照，但我们可以通过改变颜色的亮度来营造深度感。

我们将利用lightness的属性hsl()来为每张脸部产生不同的色调。



.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%;
}
Enter fullscreen mode Exit fullscreen mode

现在，您应该看到一个仅用 HTML 和 CSS 制作的精美 3D 立方体！

我希望本教程能够激发您的想象力，使用纯 HTML 和 CSS 创建迷人的 3D 动画。

欢迎在评论区分享你的作品！
想了解更多类似内容，请在 X（原 Twitter）上关注我@PaucotMartin 。

文章来源：https://dev.to/martinp/how-to-do-stunning-3d-with-pure-htmlcss-ah
Devto 翻译
PREV
Wasp - 用于开发无样板的全栈 Javascript Web 应用程序的语言
NEXT
使用 Golang 构建 RESTful API