如何实现嵌套圆形元素的内旋动画（不越界）-html教程-PHP中文网

本文详解如何通过精确定位与合理使用 transform: translateY()，让子元素在父容器内平稳旋转而不溢出边界，重点解决因 top 偏移和 translateY 过度导致的“旋转溢出”问题。

本文详解如何通过精确定位与合理使用 `transform: translatey()`，让子元素在父容器内平稳旋转而不溢出边界，重点解决因 `top` 偏移和 `translatey` 过度导致的“旋转溢出”问题。

要使 .inner-inner-circle 在 .inner-circle 内部完成流畅的旋转动画（如绕中心做圆周运动），关键在于坐标系归零 + 相对位移控制。原代码中存在两个核心问题：

初始定位偏差：.inner-inner-circle 使用 top: 150px + margin: 0 auto，但其自身高为 150px，而 .inner-circle 高为 300px，此时 top: 150px 实际将其顶部对齐到 .inner-circle 的垂直中线，导致元素下半部分超出父容器下边界；
动画位移失控：translateY(100%) 是相对于自身尺寸计算的，会使元素向下移动自身高度（150px），叠加初始偏移后严重越界。

✅ 正确做法如下：

第一步：居中初始化
将 .inner-inner-circle 的初始位置设为父容器 .inner-circle 的几何中心：

.inner-inner-circle {
  position: absolute; /* 改为 absolute，脱离文档流，便于精确定位 */
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px; /* 负 margin 实现自身中心点与父容器中心重合 */
  background-color: black;
  border-radius: 50%;
  z-index: 4;
  animation: changebg 5s linear 2s infinite alternate;
}

✅ 注意：.inner-circle 需同步改为 position: relative（已满足），作为 absolute 子元素的定位上下文。

第二步：修正动画路径
使用 transform: rotate() 配合 translateX/Y 实现圆周运动时，应以旋转中心为原点进行位移。若希望绕 .inner-circle 中心做半径为 75px 的圆周运动（即紧贴内圈边缘旋转），可这样写：
```
@keyframes changebg {
  0% {
    background-color: black;
    transform: rotate(0deg) translateX(75px) rotate(0deg);
  }
  100% {
    background-color: red;
    transform: rotate(360deg) translateX(75px) rotate(-360deg);
  }
}
```
? 原理：外层 rotate() 控制自身朝向，中间 translateX(75px) 提供固定半径位移，内层反向 rotate() 抵消朝向旋转，确保子元素始终“正立”。

第三步：响应式增强（可选）
为适配不同尺寸，建议用 em 或 CSS 自定义属性替代固定像素值：

.inner-circle {
  --radius: 150px;
}
.inner-inner-circle {
  width: calc(var(--radius) * 0.5);
  height: calc(var(--radius) * 0.5);
  margin: calc(var(--radius) * -0.25) 0 0 calc(var(--radius) * -0.25);
}

? 总结注意事项：