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 时在柱子的前面。

霜染枫丹

马老师晚上好！您那个方块绕轴转的我说是不忘初心，因为不管怎么转都离不开那个轴。这个更好，我跑了一下，可以用到很多地方。我第一个想到就是捅马蜂窝，肯定效果很好，很喜欢这些教程，我先抱走，很适合作出一个好看的动画。

谢谢您的分享，祝您秋安！

红影

这个很直观，远去时圆球会变小，感谢黑黑的详细讲解