如何通过transform-origin实现小球在大球内的无限旋转Logo动画

问题场景 #

需要实现小球在大球内部旋转、触碰所有边缘且无限循环的Logo动画，现有代码中对transform-origin的设置逻辑存在困惑，导致小球可能超出大球范围。

核心原理与解决方案 #

要让小球始终贴合大球内壁旋转，关键要满足两个条件：

• transform-origin必须设为大球的中心位置，让小球绕大球中心做圆周运动
• 小球的初始位置要保证：小球中心与大球中心的距离 = 大球半径 - 小球半径，这样旋转时小球边缘刚好贴合大球内壁

计算过程

1. 大球尺寸100x100，半径为50px，中心坐标为(50px, 50px)
2. 小球尺寸82x82，半径为41px
3. 两球中心的间距应为：50px - 41px = 9px

修改后的完整代码 #

body {
  background-color: #272727;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
}

.circle {
  width: 82px;
  height: 82px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  /* 初始位置：小球中心在大球正右侧，左上角坐标=中心坐标-小球半径 */
  left: 18px;
  top: 9px;
  animation: rotate 5s linear infinite;
  /* 旋转中心设为大球的中心 */
  transform-origin: 50px 50px;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

<div class="line">
  <div class="circle"></div>
</div>

额外说明 #

如果需要让小球从其他方向（比如正上方、正左侧）开始旋转，只需要调整.circle的left和top值，保证小球中心到大球中心的距离始终为9px即可。例如：

• 初始在正上方：left: 9px; top: 0px;
• 初始在正左侧：left: 0px; top: 9px;

内容的提问来源于stack exchange，提问作者Khan Shahan