纯css实现旋转正方体

最新推荐文章于 2024-08-15 09:13:38 发布

SoloTravelerHQ

最新推荐文章于 2024-08-15 09:13:38 发布

阅读量660

点赞数 1

分类专栏：前端笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/huangqiang80/article/details/121249435

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

纯css实现旋转正方体

思路：

1、建一个父div作为正方体容器，在div里面建六个子div作为正方体六个面。

2、创建关键帧，让父div旋转起来。

效果：

cube

代码：

<style>
  /* 设置正方体容器 */
  .fu {
    margin: 150px auto;
    height: 200px;
    width: 200px;
    /* 设置3d转换效果 */
    transform-style: preserve-3d;
    animation: cube 5s infinite linear;
  }

  /* 设置正方体六个面大小透明度 */
  .fu>div {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
  }

  /* 设置左面 */
  .z {
    transform: rotateY(90deg) translateZ(100px);
    background-color: yellow;
  }

  /* 设置右面 */
  .y {
    transform: rotateY(-90deg) translateZ(100px);
    background-color: blue;
  }

  /* 设置上面 */
  .s {
    transform: rotateX(-90deg) translateZ(100px);
    background-color: pink;
  }

  /* 设置下面 */
  .x {
    transform: rotateX(90deg) translateZ(100px);
    background-color: black;
  }

  /* 设置前面 */
  .q {
    transform: rotateY(0deg) translateZ(100px);
    background-color: red;
  }

  /* 设置后面 */
  .h {
    transform: rotateY(180deg) translateZ(100px);
    background-color: greenyellow;
  }

  /* 创建正方体旋转动画 */
  @keyframes cube {
    from {
      transform: rotateX(0) rotateZ(0);
    }

    to {
      transform: rotateX(360deg) rotateZ(360deg);
    }
  }
</style>

<body>
  <div class="fu">
    <div class="z"></div>
    <div class="y"></div>
    <div class="s"></div>
    <div class="x"></div>
    <div class="q"></div>
    <div class="h"></div>
  </div>
</body>

SoloTravelerHQ

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯css实现旋转正方体

纯css实现旋转正方体思路：1、建一个父div作为正方体容器，在div里面建六个子div作为正方体六个面。2、创建关键帧，让父div旋转起来。效果：代码：<style> /* 设置正方体容器 */ .fu { margin: 150px auto; height: 200px; width: 200px; /* 设置3d转换效果 */ transform-style: preserve-3d; animation: cube
复制链接

扫一扫

专栏目录