用html css 做一个立体正方形 左 右 上三面 完整代码

以下是一个基本的立体正方形的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属性来使立方体看起来更立体