用 HTML 和 CSS 创建一个 3D 正方形 (完整代码)

以下是一个基本的立体正方形的 HTML 和 CSS 代码：

HTML 代码：

<div class='cube'>
  <div class='front'></div>
  <div class='back'></div>
  <div class='top'></div>
  <div class='bottom'></div>
  <div class='left'></div>
  <div class='right'></div>
</div>

CSS 代码：

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
}

.cube div {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  opacity: 0.8;
  border: 2px solid #fff;
}

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

.back {
  transform: translateZ(-50px);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
}

在这个代码中，我们创建了一个具有 'cube' 类的 'div' 元素，该元素是一个立方体的容器。然后，我们在其中创建了六个具有不同类名的 'div' 元素，表示立方体的六个面。

我们使用 CSS 的 'transform' 属性来将这些面放置在正确的位置，并使用 'transform-style: preserve-3d' 来确保它们在三维空间中正确呈现。

最后，我们使用 CSS 的 'opacity' 和 'border' 属性来使立方体看起来更立体。