HTML CSS 创建立体正方形：左、右、上三面代码示例

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

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

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

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

首先，我们创建了一个<div>元素，它的类名为cube，表示这是一个立方体。

然后，我们在这个<div>元素内部创建了三个子元素，它们的类名分别为left、right和top，表示这是立方体的左、右和上三个面。

接着，我们使用CSS样式对这些元素进行定位和变换。首先，我们给cube元素设置了宽度、高度和position: relative属性，表示这个元素是一个相对定位的容器。

然后，我们使用transform-style: preserve-3d属性，表示这个元素内部的子元素应该保持3D效果。

接下来，我们针对每个子元素分别设置了position: absolute属性，表示它们是绝对定位的元素。然后，我们使用transform属性对它们进行旋转和平移，使它们分别位于立方体的左、右和上三个面。

最后，我们给每个子元素设置了相同的宽度、高度和背景颜色，这样它们就可以形成一个完整的立方体了。

这只是一个简单的示例，实际上可以使用更复杂的CSS样式和变换来创建更复杂的3D形状。