css动画立方体代码

下面是一个使用 CSS 动画创建立方体的代码示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .cube-container {
      perspective: 800px;
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }

    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateX(0deg) rotateY(0deg);
      animation: rotate 6s infinite linear;
    }

    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: rgba(0, 0, 0, 0.8);
      border: 2px solid #fff;
    }

    .front { transform: translateZ(100px); }
    .back { transform: translateZ(-100px) rotateY(180deg); }
    .right { transform: translateX(100px) rotateY(90deg); }
    .left { transform: translateX(-100px) rotateY(-90deg); }
    .top { transform: translateY(-100px) rotateX(90deg); }
    .bottom { transform: translateY(100px) rotateX(-90deg); }

    @keyframes rotate {
      0% { transform: rotateX(0deg) rotateY(0deg); }
      100% { transform: rotateX(360deg) rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div class="cube-container">
    <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>
  </div>
</body>
</html>