[分享]css做一个立体正方体怎么画

CSS是一种非常强大的语言，它可以为我们带来非常酷炫的效果。例如，我们可以使用CSS来画一个立体正方体。

.cube {
  background-color: grey;
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
}
.cube:before,
.cube:after {
  content: "";
  position: absolute;
  background-color: grey;
}
.cube:before {
  width: 100px;
  height: 10px;
  top: -5px;
  left: 0;
  transform-origin: center bottom;
  transform: rotateX(90deg);
}
.cube:after {
  width: 10px;
  height: 100px;
  top: 0;
  left: -5px;
  transform-origin: center left;
  transform: rotateY(90deg);
}
.cube .face {
  position: absolute;
  background-color: white;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.cube .face.front {
  transform: translateZ(50px);
}
.cube .face.back {
  transform: translateZ(-50px);
}
.cube .face.right {
  transform: rotateY(90deg) translateZ(50px) translateX(50px);
}
.cube .face.left {
  transform: rotateY(-90deg) translateZ(50px) translateX(-50px);
}
.cube .face.top {
  transform: rotateX(90deg) translateZ(50px) translateY(-50px);
}
.cube .face.bottom {
  transform: rotateX(-90deg) translateZ(50px) translateY(50px);
} 

我们可以看到，我们首先定义了一个.cube类，它包含一个背景颜色、宽度、高度和位置属性。我们还定义它的transform-style属性，并将其设置为preserve-3d，以便定义其子元素的3D空间关系。

接下来，我们定义了两个子元素，.cube:before和.cube:after，它们代表正方体的顶部和侧面。我们使用伪元素来定义它们，它们使用绝对定位，并定义了宽度、高度、位置和transform-origin属性以使其成为立方体的一部分。

然后，我们定义了6个子元素，它们代表正方体的正面、背面、右面、左面、上面和下面。我们为它们定义了一个.face类，并将其绝对定位，还定义了背景颜色、宽度、高度和边框属性。我们使用translateZ函数将每个面移至适当的深度，使其成为正方体一部分，并使用translateX、translateY和rotate函数调整它们的位置和方向。

最后，我们可以在HTML中创建一个具有.cube类的元素，并将正方体呈现出来！