马黑黑《CSS关键帧动画：运动对象绕柱子做圆周运动》

醉美水芙蓉

<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>

醉美水芙蓉

主要原理： 任何可视元素，Z轴默认是 0，柱子就是。圆球在动画中会改变其在Z轴上的位置，低于 0 时它们在柱子的背后，大于等于 0 时在柱子的前面。