[分享]css中实现3D立体盒

CSS中可以通过transform属性实现3D立体盒的效果，下面是一个简单的例子。

.box {
  width: 200px;
  height: 150px;
  border: 1px solid #000;
  perspective: 400px; /* 透视距离 */
  transform-style: preserve-3d; /* 保持3D效果 */
}

.front, .back, .left, .right, .top, .bottom {
  position: absolute;
  width: 200px;
  height: 150px;
}

.front {
  background-color: #f00;
  transform: translateZ(75px);
}

.back {
  background-color: #0f0;
  transform: rotateY(180deg) translateZ(75px);
}

.left {
  background-color: #00f;
  transform: rotateY(-90deg) translateZ(100px) translateX(-100px);
}

.right {
  background-color: #ff0;
  transform: rotateY(90deg) translateZ(100px) translateX(100px);
}

.top {
  background-color: #f0f;
  transform: rotateX(90deg) translateY(-75px) translateZ(100px);
}

.bottom {
  background-color: #0ff;
  transform: rotateX(-90deg) translateY(75px) translateZ(100px);
} 

这里定义了一个具有透视效果的容器.box，并使用了preserve-3d属性来保持3D效果。之后通过定义6个面，分别是.front到.bottom，每个面用position: absolute来定位。接着针对每个面使用不同的transform属性，通过位移、旋转的方式让它们组成一个立体盒的效果。