马黑黑《CSS关键帧动画：运动对象绕柱子做圆周运动》
<div class="hEdiv" data-prev="1"><pre class="hEpre"><style>
/* 一级容器 ：提供景深（基于Z轴）*/
.pa {
width: 1024px;
height: 800px;
border: thick double gray;
perspective: 2000px; /* 景深 */
margin: 20px auto 0;
position: relative;
}
/* 二级容器 ：提供3d舞台 */
.ma {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d; /* 3d场景 */
}
/* .ma伪元素 ：模拟柱子 */
.ma::before {
content: '';
width: 40px;
height: 100%;
left: calc(50% - 20px);
background: linear-gradient(90deg, silver, gray, silver);
border-radius: 20px;
transform: rotateY(45deg);
position: absolute;
}
/* 目标元素 ：3d场景中的演员 */
.son {
left: calc(50% - 30px);
top: calc(35%);
width: 60px;
height: 60px;
background: linear-gradient(135deg, lightgreen, yellow);
box-shadow: 2px 2px 16px rgba(0,0,0,.25);
border-radius: 50%;
animation: move 10s linear infinite;
position: absolute;
}
/* 动画路径中均摊位置 */
.son:nth-of-type(2) { animation-delay: -2s; }
.son:nth-of-type(3) { animation-delay: -4s; }
.son:nth-of-type(4) { animation-delay: -6s; }
.son:nth-of-type(5) { animation-delay: -8s; }
/* 关键帧动画 ：相抵路径动画 + 3d变换（Z轴位置）*/
@keyframes move {
0% { transform: translateZ(0) rotateZ(0) translateX(200px); }
25% { transform: translateZ(420px) rotateZ(90deg) translateX(200px); }
50% { transform: translateZ(0) rotateZ(180deg) translateX(200px); }
75% { transform: translateZ(-1600px) rotateZ(270deg) translateX(200px); }
100% { transform: translateZ(0) rotateZ(360deg) translateX(200px); }
}
</style>
<div class="pa">
<div class="ma">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</div>
</pre></div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script>
主要原理：
任何可视元素，Z轴默认是 0，柱子就是。圆球在动画中会改变其在Z轴上的位置，低于 0 时它们在柱子的背后，大于等于 0 时在柱子的前面。
页:
[1]