躺着旋转动画

# 目的

实现效果如下 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);
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

使用

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
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

上次更新: 2022/06/05, 20:31:36

← css常见但不常用的属性边框渐变（圆形）→