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>

这段代码使用 CSS 3D 转换和动画属性来创建一个立方体，并对其进行旋转动画。立方体由六个面组成，每个面都是一个 <div> 元素，通过 transform 属性设置其在三维空间中的位置和旋转。

你可以将上述代码复制到一个 HTML 文件中并在浏览器中打开，就可以看到动画效果了。注意，这段代码可能需要在现代浏览器中运行，以支持 CSS 3D 转换和动画特性。

posted @ 2023-06-04 14:56  拓源技术  阅读(26)  评论(0)  编辑  收藏  举报