css3动画之 transform-style preserve-3d 实现webpack官网图标

最新推荐文章于 2024-07-18 19:27:45 发布

Dyanfee

最新推荐文章于 2024-07-18 19:27:45 发布

阅读量997

点赞数 19

文章标签： css3 3d webpack

本文链接：https://blog.csdn.net/Dyanfee/article/details/138570941

版权

实现效果

随时间变化两个立方体滚动变化，如下图：

在这里插入图片描述

效果查看(点击查看)

实现思路

利用transform-style: preserve-3d;将元素转为3D视图。
```
.main {
  transform-style: preserve-3d;
  transform: rotateX(-35.5deg) rotateY(45deg);
}
```
注意：放元素的容器可以设置景深相机，但是在本动画中设置后会导致线条无法完全对，可自行尝试
```
body {
  perspective: 800px;
}
```

设置两个立方体动画

@keyframes rotate1 {
  0% {
    transform: rotateY(0deg);
  }
  66% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotateY(0deg) scale3d(0.5, 0.5, 0.5);
  }
  66% {
    transform: rotateY(0deg) scale3d(0.5, 0.5, 0.5);
  }
  100% {
    transform: rotateY(-90deg) scale3d(0.5, 0.5, 0.5);
  }
}

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack3d</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        /* perspective: 800px; */
        background-color: #2b3a42;
      }
      .main {
        transform-style: preserve-3d;
        transform: rotateX(-35.5deg) rotateY(45deg);
      }
@keyframes rotate1 {
  0% {
    transform: rotateY(0deg);
  }
  66% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotateY(0deg) scale3d(0.5, 0.5, 0.5);
  }
  66% {
    transform: rotateY(0deg) scale3d(0.5, 0.5, 0.5);
  }
  100% {
    transform: rotateY(-90deg) scale3d(0.5, 0.5, 0.5);
  }
}
      .rect {
        width: 200px;
        height: 200px;
        position: absolute;
        transform-style: preserve-3d;
        transition: all 1s;
      }
      .rect-outer {
        transform: rotateY(0deg);
        animation: rotate1 3s ease infinite forwards;
      }
      .rect-inner {
        transform: rotateY(0deg) scale3d(0.5, 0.5, 0.5);
        animation: rotate2 3s ease infinite forwards;
      }
      .rect.rect-inner div {
        background-color: rgba(3, 80, 116, 1);
      }
      .rect div {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 142, 207, 0.2);
        border: 1px solid #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }

      .rect div:nth-child(1) {
        transform: translateZ(100px);
      }
      .rect div:nth-child(2) {
        transform: translateZ(-100px);
      }
      .rect div:nth-child(3) {
        transform: translateX(100px) rotateY(90deg);
      }
      .rect div:nth-child(4) {
        transform: translateX(-100px) rotateY(90deg);
      }
      .rect div:nth-child(5) {
        transform: translateY(-100px) rotateX(90deg);
      }
      .rect div:nth-child(6) {
        transform: translateY(100px) rotateX(90deg);
      }
    </style>
  </head>
  <body>
    <script>
      (function () {
        let outer = 0;
        let inner = 0;
        let step = 90;

        function setTdans(cls, str) {
          document.querySelector(cls).style.transform = str;
        }
      })();
    </script>
    <div class="main">
      <section class="rect rect-outer">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>
      <section class="rect rect-inner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>
    </div>
  </body>
</html>