效果：实现的环绕变化效果
媒体1
translate3d(x,y,z) 中x、y、z变化计算方法
def d3xyz():
w=100
m=(2*math.pi)/w
r=200 # x轴 浮动
r2=50 # y 轴浮动
zz =0
for i in range(0,w+1):
z = i+0
if (z>100):
z = zz
zz = zz+1
print(str(z)+"% " + "{transform: perspective(1000px) translate3d(%spx, %spx, %spx) }" % (int(r * math.cos(m*i)), int(r2 * math.sin(m*i)), int(r * math.sin(m*i))))
#### 运行打印如下：
0% {transform: perspective(1000px) translate3d(200px, 0px, 0px) }
1% {transform: perspective(1000px) translate3d(199px, 3px, 12px) }
2% {transform: perspective(1000px) translate3d(198px, 6px, 25px) }
3% {transform: perspective(1000px) translate3d(196px, 9px, 37px) }
4% {transform: perspective(1000px) translate3d(193px, 12px, 49px) }
5% {transform: perspective(1000px) translate3d(190px, 15px, 61px) }
6% {transform: perspective(1000px) translate3d(185px, 18px, 73px) }
7% {transform: perspective(1000px) translate3d(180px, 21px, 85px) }
8% {transform: perspective(1000px) translate3d(175px, 24px, 96px) }
9% {transform: perspective(1000px) translate3d(168px, 26px, 107px) }
10% {transform: perspective(1000px) translate3d(161px, 29px, 117px) }CSS 代码参考如下：
.main .cicle12 {
width: 5rem;
height: 5rem;
position: absolute;
top: 50%;
left: 45%;
z-index: 100;
background: url(../../../assets/pictures/bd/project/circle2.png) no-repeat;
background-size: 100%;
color: #0ac1c7;
animation: rotate121 20s linear infinite;
}
@keyframes rotate121 {80% {transform: perspective(1000px) translate3d(200px, 0px, 0px) }
81% {transform: perspective(1000px) translate3d(199px, 3px, 12px) }
82% {transform: perspective(1000px) translate3d(198px, 6px, 25px) }
83% {transform: perspective(1000px) translate3d(196px, 9px, 37px) }
84% {transform: perspective(1000px) translate3d(193px, 12px, 49px) }
85% {transform: perspective(1000px) translate3d(190px, 15px, 61px) }
86% {transform: perspective(1000px) translate3d(185px, 18px, 73px) }
87% {transform: perspective(1000px) translate3d(180px, 21px, 85px) }
88% {transform: perspective(1000px) translate3d(175px, 24px, 96px) }
89% {transform: perspective(1000px) translate3d(168px, 26px, 107px) }
90% {transform: perspective(1000px) translate3d(161px, 29px, 117px) }
91% {transform: perspective(1000px) translate3d(154px, 31px, 127px) }
92% {transform: perspective(1000px) translate3d(145px, 34px, 136px) }
93% {transform: perspective(1000px) translate3d(136px, 36px, 145px) }
94% {transform: perspective(1000px) translate3d(127px, 38px, 154px) }
95% {transform: perspective(1000px) translate3d(117px, 40px, 161px) }
96% {transform: perspective(1000px) translate3d(107px, 42px, 168px) }
97% {transform: perspective(1000px) translate3d(96px, 43px, 175px) }
98% {transform: perspective(1000px) translate3d(85px, 45px, 180px) }
99% {transform: perspective(1000px) translate3d(73px, 46px, 185px) }
100% {transform: perspective(1000px) translate3d(61px, 47px, 190px) }
0% {transform: perspective(1000px) translate3d(49px, 48px, 193px) }
1% {transform: perspective(1000px) translate3d(37px, 49px, 196px) }
2% {transform: perspective(1000px) translate3d(25px, 49px, 198px) }
3% {transform: perspective(1000px) translate3d(12px, 49px, 199px) }
4% {transform: perspective(1000px) translate3d(0px, 50px, 200px) }
5% {transform: perspective(1000px) translate3d(-12px, 49px, 199px) }
6% {transform: perspective(1000px) translate3d(-25px, 49px, 198px) }
7% {transform: perspective(1000px) translate3d(-37px, 49px, 196px) }
8% {transform: perspective(1000px) translate3d(-49px, 48px, 193px) }
9% {transform: perspective(1000px) translate3d(-61px, 47px, 190px) }
10% {transform: perspective(1000px) translate3d(-73px, 46px, 185px) }
11% {transform: perspective(1000px) translate3d(-85px, 45px, 180px) }
12% {transform: perspective(1000px) translate3d(-96px, 43px, 175px) }
13% {transform: perspective(1000px) translate3d(-107px, 42px, 168px) }
14% {transform: perspective(1000px) translate3d(-117px, 40px, 161px) }
15% {transform: perspective(1000px) translate3d(-127px, 38px, 154px) }
16% {transform: perspective(1000px) translate3d(-136px, 36px, 145px) }
17% {transform: perspective(1000px) translate3d(-145px, 34px, 136px) }
18% {transform: perspective(1000px) translate3d(-154px, 31px, 127px) }
19% {transform: perspective(1000px) translate3d(-161px, 29px, 117px) }
20% {transform: perspective(1000px) translate3d(-168px, 26px, 107px) }
21% {transform: perspective(1000px) translate3d(-175px, 24px, 96px) }
22% {transform: perspective(1000px) translate3d(-180px, 21px, 85px) }
23% {transform: perspective(1000px) translate3d(-185px, 18px, 73px) }
24% {transform: perspective(1000px) translate3d(-190px, 15px, 61px) }
25% {transform: perspective(1000px) translate3d(-193px, 12px, 49px) }
26% {transform: perspective(1000px) translate3d(-196px, 9px, 37px) }
27% {transform: perspective(1000px) translate3d(-198px, 6px, 25px) }
28% {transform: perspective(1000px) translate3d(-199px, 3px, 12px) }
29% {transform: perspective(1000px) translate3d(-200px, 0px, 0px) }
30% {transform: perspective(1000px) translate3d(-199px, -3px, -12px) }
31% {transform: perspective(1000px) translate3d(-198px, -6px, -25px) }
32% {transform: perspective(1000px) translate3d(-196px, -9px, -37px) }
33% {transform: perspective(1000px) translate3d(-193px, -12px, -49px) }
34% {transform: perspective(1000px) translate3d(-190px, -15px, -61px) }
35% {transform: perspective(1000px) translate3d(-185px, -18px, -73px) }
36% {transform: perspective(1000px) translate3d(-180px, -21px, -85px) }
37% {transform: perspective(1000px) translate3d(-175px, -24px, -96px) }
38% {transform: perspective(1000px) translate3d(-168px, -26px, -107px) }
39% {transform: perspective(1000px) translate3d(-161px, -29px, -117px) }
40% {transform: perspective(1000px) translate3d(-154px, -31px, -127px) }
41% {transform: perspective(1000px) translate3d(-145px, -34px, -136px) }
42% {transform: perspective(1000px) translate3d(-136px, -36px, -145px) }
43% {transform: perspective(1000px) translate3d(-127px, -38px, -154px) }
44% {transform: perspective(1000px) translate3d(-117px, -40px, -161px) }
45% {transform: perspective(1000px) translate3d(-107px, -42px, -168px) }
46% {transform: perspective(1000px) translate3d(-96px, -43px, -175px) }
47% {transform: perspective(1000px) translate3d(-85px, -45px, -180px) }
48% {transform: perspective(1000px) translate3d(-73px, -46px, -185px) }
49% {transform: perspective(1000px) translate3d(-61px, -47px, -190px) }
50% {transform: perspective(1000px) translate3d(-49px, -48px, -193px) }
51% {transform: perspective(1000px) translate3d(-37px, -49px, -196px) }
52% {transform: perspective(1000px) translate3d(-25px, -49px, -198px) }
53% {transform: perspective(1000px) translate3d(-12px, -49px, -199px) }
54% {transform: perspective(1000px) translate3d(0px, -50px, -200px) }
55% {transform: perspective(1000px) translate3d(12px, -49px, -199px) }
56% {transform: perspective(1000px) translate3d(25px, -49px, -198px) }
57% {transform: perspective(1000px) translate3d(37px, -49px, -196px) }
58% {transform: perspective(1000px) translate3d(49px, -48px, -193px) }
59% {transform: perspective(1000px) translate3d(61px, -47px, -190px) }
60% {transform: perspective(1000px) translate3d(73px, -46px, -185px) }
61% {transform: perspective(1000px) translate3d(85px, -45px, -180px) }
62% {transform: perspective(1000px) translate3d(96px, -43px, -175px) }
63% {transform: perspective(1000px) translate3d(107px, -42px, -168px) }
64% {transform: perspective(1000px) translate3d(117px, -40px, -161px) }
65% {transform: perspective(1000px) translate3d(127px, -38px, -154px) }
66% {transform: perspective(1000px) translate3d(136px, -36px, -145px) }
67% {transform: perspective(1000px) translate3d(145px, -34px, -136px) }
68% {transform: perspective(1000px) translate3d(154px, -31px, -127px) }
69% {transform: perspective(1000px) translate3d(161px, -29px, -117px) }
70% {transform: perspective(1000px) translate3d(168px, -26px, -107px) }
71% {transform: perspective(1000px) translate3d(175px, -24px, -96px) }
72% {transform: perspective(1000px) translate3d(180px, -21px, -85px) }
73% {transform: perspective(1000px) translate3d(185px, -18px, -73px) }
74% {transform: perspective(1000px) translate3d(190px, -15px, -61px) }
75% {transform: perspective(1000px) translate3d(193px, -12px, -49px) }
76% {transform: perspective(1000px) translate3d(196px, -9px, -37px) }
77% {transform: perspective(1000px) translate3d(198px, -6px, -25px) }
78% {transform: perspective(1000px) translate3d(199px, -3px, -12px) }
79% {transform: perspective(1000px) translate3d(200px, 0px, 0px) }
}