css 设计立方体效果

CSS设计立方体效果通常通过CSS3的`transform`属性和一些伪元素`:before`和`:after`配合来实现。下面是一个简单的例子：

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  perspective: 1000px; /* 设置透视视图 */
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
}

.front { background-color: #f00; transform: translateZ(100px); }
.back { background-color: #0f0; transform: rotateY(180deg) translateZ(100px); }
.right { background-color: #00f; transform: rotateX(-90deg) translateZ(100px); }
.left { background-color: #f0f; transform: rotateX(90deg) translateZ(100px); }
.top { background-color: #ff0; transform: rotateY(90deg) translateZ(100px); }
.bottom { background-color: #0ff; transform: rotateY(-90deg) translateZ(100px); }

/* 使用伪元素创建边框 */
.cube:before,
.cube:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: black;
}
.cube:before { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.cube:after { top: 50%; right: 50%; transform: translate(-50%, -50%) rotate(-45deg); }

在这个例子中，`.cube`是一个容器，`.face`用于定义每个面的内容，而`.front`, `.back`, `.right`, `.left`, `.top`, 和 `.bottom`分别对应立方体的不同侧面。通过`transform`属性结合`translateZ`和旋转，实现了立方体的3D效果。`:before`和`:after`伪元素则模拟了立方体的边框。