3D 旋转立方体

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,我们将使用 HTML 和 CSS 创建一个 3D 旋转立方体。这个立方体将具有彩色的面,并且会无限旋转,产生视觉上吸引人的效果。我们将逐步引导你完成整个过程,帮助你从头开始构建这个项目。

编写 HTML 结构

你可以在编辑器中看到以下文件。

├── index.html
└── style.css

现在,让我们为立方体创建 HTML 结构。在文本编辑器中打开 index.html 文件,并添加以下 HTML 代码:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Rotating Cube</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="cube">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
      <div class="face right">Right</div>
      <div class="face left">Left</div>
      <div class="face top">Top</div>
      <div class="face bottom">Bottom</div>
    </div>
  </body>
</html>

这段代码设置了 HTML 文档结构,包含一个立方体容器和六个面,每个面都标有不同的侧面名称。

创建基础 CSS 样式

现在,让我们添加基础的 CSS 样式来定位和美化立方体。打开 style.css 文件,并添加以下 CSS 代码:

/* style.css */

/* 立方体容器样式 */
.cube {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  position: relative;
  transform-style: preserve-3d;
}

在这一步中,我们定义了立方体容器的基本尺寸和定位。

为每个面添加样式

为了让立方体的每个面具有独特性并呈现 3D 效果,我们将为每个面单独添加样式。将以下代码添加到你的 style.css 文件中:

/* 单个面的样式 */
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #c3bfbf;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

这段 CSS 代码定义了立方体所有面的通用样式。

为正面和背面添加样式

让我们为立方体的正面和背面添加样式,赋予它们背景颜色。将以下代码添加到你的 style.css 文件中:

/* 正面 */
.front {
  background-color: #fbf0b2;
  transform: rotateY(0deg) translateZ(100px);
}

/* 背面 */
.back {
  background-color: #ffc7ea;
  transform: rotateY(180deg) translateZ(100px);
}

在这一步中,我们定义了正面和背面的背景颜色以及初始的 3D 位置。

为右侧和左侧面添加样式

现在,让我们为立方体的右侧和左侧面添加样式。将以下代码添加到你的 style.css 文件中:

/* 右侧面 */
.right {
  background-color: #d8b4f8;
  transform: rotateY(90deg) translateZ(100px);
}

/* 左侧面 */
.left {
  background-color: #caedff;
  transform: rotateY(-90deg) translateZ(100px);
}

这些样式为右侧和左侧面赋予了独特的颜色和位置。

为顶部和底部面添加样式

最后,让我们为立方体的顶部和底部面添加样式。将以下代码添加到你的 style.css 文件中:

/* 顶部面 */
.top {
  transform: rotateX(90deg) translateZ(100px);
}

/* 底部面 */
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

这些样式将顶部和底部面设置到它们的初始位置。

添加立方体旋转动画

为了让立方体无限旋转,让我们添加一个旋转动画。将以下代码添加到你的 style.css 文件中:

/* 旋转的关键帧动画 */
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(90deg);
  }

  100% {
    transform: rotateX(180deg);
  }
}

/* 将旋转动画应用到立方体 */
.cube {
  animation: rotate 5s infinite linear;
}

这段代码定义了一个名为 "rotate" 的关键帧动画,并将其应用到立方体容器上,使其持续旋转。

现在你已经设置好了 HTML 和 CSS,是时候查看旋转立方体的效果了。在你的网页浏览器中打开 index.html 文件,你应该会看到一个带有彩色面并无限旋转的 3D 立方体。

3D 旋转立方体动画

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签页以预览网页。

总结

恭喜!你已经成功地使用 HTML 和 CSS 创建了一个 3D 旋转立方体。这个逐步教程引导你完成了项目的设置、创建 HTML 结构、应用 CSS 样式以实现 3D 变换,以及添加动画。如果你有兴趣通过交互性增强你的立方体,可以探索添加 JavaScript 作为可选步骤。尽情实验并自定义你的 3D 立方体项目吧!

您可能感兴趣的其他 CSS 教程