如何仅使用CSS实现div元素沿圆形边缘进行旋转运动

CSS 完全支持沿圆形路径同时进行位移和旋转操作。你当前的动画不够流畅是因为手动指定了三个关键帧的坐标值，浏览器插值计算时容易出现路径偏移，你可以通过调整变换顺序和变换基点实现更简洁流畅的效果，同时满足底边贴合圆形边缘的需求。

核心修改逻辑 #

• 将蓝色元素的transform-origin设置为自身底边中心，保证旋转时底边始终贴合圆形边缘
• 调整transform的执行顺序，先旋转再沿元素自身Y轴偏移圆形半径距离，无需手动计算每个角度的XY坐标

优化后完整代码 #

#mainContent{ 
    position: relative;
    display: block;
    width: 100vw;
    border: none;
    margin: 0 auto;
    height: 100vh;
    overflow: visible;
    background: black;
}

#circle{
  position: absolute;
  left: 50%;
  top: 50%;
  background: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

.container{
  position: absolute;
  left: 50%;
  top: 50%;
  background: pink;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

#element{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 60px;
  background: blue;
  /* 变换基点设为自身底边中点 */
  transform-origin: center bottom;
  animation: orbit 3s linear infinite;
}

@keyframes orbit{
  0% {
    /* 先旋转对应角度，再沿当前元素Y轴向上偏移圆半径长度 */
    transform: rotate(0deg) translateY(-50px);
  }
  100% {
    transform: rotate(90deg) translateY(-50px);
  }
}

*{
  margin: 0;
}

<div id="mainContent">
  <div class="container"></div>
  <div id="circle"></div>
  <div id="element"></div>
</div>

修改后的动画仅需要定义起止角度，浏览器会自动生成流畅的圆弧运动路径，蓝色元素的底边全程贴合红色圆形的边缘，不需要额外计算中间点位坐标。如果需要实现全圆周运动，只需要将100%关键帧的旋转角度改为360deg即可。

内容的提问来源于stack exchange，提问作者Mareș Ștefan