躺着旋转动画
# 目的
实现效果如下 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
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
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