CSS 3D动态立体图形

最新推荐文章于 2025-06-22 09:46:22 发布

zhgkay

最新推荐文章于 2025-06-22 09:46:22 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端参考手册 CSS 文章标签： 3D 动态立方体

本文链接：https://blog.youkuaiyun.com/Tok_Tik/article/details/94751554

本文介绍如何利用CSS实现3D动态立方体效果，包括HTML结构和CSS样式设置，展示了3D立方体转动的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 3D动态立方体

1. HTML

<body>
  <div class="box">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
  </div>
</body>

2. CSS

  <style type="text/css">
    .box {
      width: 500px;
      height: 500px;
      position: relative;
      margin: 200px auto;
      transform-style: preserve-3d;
      perspective: 15000px;
      transition: all 5s linear;
      animation: mytest 5s linear infinite normal;
    }

    @keyframes mytest {
      0% {
        transform: rotateX(0deg) rotateY(0deg);
      }

      100% {
        transform: rotateX(360deg) rotateY(360deg);

      }
    }


    .test {
      width: 200px;
      height: 200px;