介绍
在本实验中,我们将使用 HTML 和 CSS 创建一个 3D 旋转立方体。这个立方体将具有彩色的面,并且会无限旋转,产生视觉上吸引人的效果。我们将逐步引导你完成整个过程,帮助你从头开始构建这个项目。
在本实验中,我们将使用 HTML 和 CSS 创建一个 3D 旋转立方体。这个立方体将具有彩色的面,并且会无限旋转,产生视觉上吸引人的效果。我们将逐步引导你完成整个过程,帮助你从头开始构建这个项目。
你可以在编辑器中看到以下文件。
├── 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 样式来定位和美化立方体。打开 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 立方体。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签页以预览网页。
恭喜!你已经成功地使用 HTML 和 CSS 创建了一个 3D 旋转立方体。这个逐步教程引导你完成了项目的设置、创建 HTML 结构、应用 CSS 样式以实现 3D 变换,以及添加动画。如果你有兴趣通过交互性增强你的立方体,可以探索添加 JavaScript 作为可选步骤。尽情实验并自定义你的 3D 立方体项目吧!