<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/dbb200.md for this page in Markdown format</div>

目的

实现效果如下 3d 下面两个底盘相向旋转

实现过程

• 定义两个平面相向旋转，然后3d x轴旋转一定的角度即可
• 实现代码如下
  • ​ 封装scss函数 mixin

@mixin round-ani($img, $rx: 60deg, $isReverse: false) {
  transform: rotateX($rx);
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: $img;
    background-size: 100% 100%;
    // animation: round-ani 3s linear infinite;
    @if $isReverse {
      animation-name: -round-ani;
    } @else {
      animation-name: round-ani;
    }
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
  }

  @keyframes round-ani {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes -round-ani {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
}

• 使用

section {
  ...
  position: relative;       
  .rotate_el {
    height: 200px;
    width: 200px;
    position: absolute;
    left: 50%;
    // transform: translateX(-50%);
    margin-left: -100px;
    top: -36px;
    @include round-ani(url('../../../../../assets/img/monitor/5661645013638_.pic.jpg'));
  }
  .rotate_el2 {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    // transform: translateX(-50%);
    margin-left: -100px;
    top: -32px;
    @include round-ani(
      url('../../../../../assets/img/monitor/5671645013638_.pic.jpg'),
      60deg,
      true
    );
  }
}