3D CSS立方体教程：轻松掌握CSS作画技巧

2023-10-17 12:30:43

使用CSS3D让网页动起来：创建惊人的3D立方体

准备工作

踏入3D世界的第一步是为你的创作做好准备。你需要的是一个可靠的文本编辑器（例如记事本、Sublime Text或Visual Studio Code）、一个兼容的浏览器（例如Chrome、Firefox或Safari）和一些你准备展示的图像（例如产品图片或菜单图标）。

构建HTML骨架

就像建造任何结构一样，我们需要一个稳固的框架。创建一个HTML文件，并输入以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

这会创建一个包含六个div元素的容器div，每个div代表立方体的六个面。

添加CSS魔力

现在是将我们的立方体从2D提升到3D的时候了。使用CSS，我们可以赋予立方体容器和面元素必要的属性：

#cube {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.front, .back, .left, .right, .top, .bottom {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

容器设置了宽高、透视距离和变换样式，使它能够呈现3D效果。面元素被定位为绝对元素，并隐藏了背面，以防止出现闪烁。

定义面元素的旋转

现在，让我们赋予立方体生命，让它旋转起来：

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

这些属性使用平移和旋转变换来定义每个面的位置和方向。

添加图像

最后，让我们用一些视觉效果让立方体焕发生机：

.front {
  background-image: url("front.jpg");
}

.back {
  background-image: url("back.jpg");
}

.left {
  background-image: url("left.jpg");
}

.right {
  background-image: url("right.jpg");
}

.top {
  background-image: url("top.jpg");
}

.bottom {
  background-image: url("bottom.jpg");
}