前端：用css打造炫酷3d特效- css3d立方体

以下是一个简单的3D立方体CSS样式代码示例：

.cube {
  width: 100px;
  height: 100px;
  margin: 50px;
  transform-style: preserve-3d;
  animation: rotate 5s infinite;
}
 
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #333;
  box-shadow: 0 0 5px #555 inset;
}
 
/* 定义每个面的位置 */
.front { }
.back {
  transform: rotateY(180deg);
}
.right {
  transform: rotateY(90deg);
}
.left {
  transform: rotateY(-90deg);
}
.top {
  transform: rotateX(90deg);
}
.bottom {
  transform: rotateX(-90deg);
}
 
/* 动画 */
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
 
/* HTML结构 */
<div class="cube">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face right"></div>
  <div class="face left"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>

这段代码创建了一个具有6个面的3D立方体，并通过CSS动画使其不断旋转。每个.face都是立方体的一个面，通过transform属性的不同值，它们被放置在正确的位置，并且通过animation属性应用了持续的旋转动画。