本文详解如何通过精准的定位与 CSS 变换（transform）控制，使子元素（如 .inner-inner-circle）严格限制在父容器（.inner-circle）内部完成旋转动画，避免因 translateY 偏移过大导致元素“飞出”边界。
本文详解如何通过精准的定位与 css 变换（transform）控制，使子元素（如 `.inner-inner-circle`）严格限制在父容器（`.inner-circle`）内部完成旋转动画，避免因 `translatey` 偏移过大导致元素“飞出”边界。
在实现嵌套圆形动画（如旋转精灵图）时，一个常见误区是：仅依赖 top/left 和 translateY 进行位移，却忽略了相对定位基准与变换原点（transform origin） 的协同关系。原始代码中，.inner-inner-circle 设置了 top: 150px（远超其自身高度的一半），又在动画中使用 translateY(100%)——该百分比基于自身尺寸计算，导致位移量叠加后严重超出 .inner-circle 的可视区域。
✅ 正确做法：中心对齐 + 相对位移约束
首先，确保 .inner-inner-circle 在 .inner-circle 内垂直居中：
.inner-inner-circle {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
top: 75px; /* = 150px / 2，使其底部对齐 inner-circle 垂直中线 */
/* 注意：此处不推荐用 transform: translateY(-50%)，因后续动画需叠加 rotate */
}
其次，修正 @keyframes 中的 translateY 值——应使用 50% 而非 100%，因为：
- translateY(50%) 表示向下移动自身高度的 50%（即 75px）；
- 结合初始 top: 75px，元素中心将恰好落在 .inner-circle 的几何中心；
- 旋转时，以中心为轴，自然保持全部内容在父容器内。
@keyframes changebg {
0% {
background-color: black;
transform: rotate(0deg) translateY(0) rotate(0deg);
}
100% {
background-color: red;
transform: rotate(360deg) translateY(50%) rotate(360deg);
}
}
⚠️ 注意事项：
- transform 是复合操作，多次 rotate() 会叠加（本例中冗余，可简化为 rotate(360deg) translateY(50%)）；
- 若需更精确控制旋转中心，可显式设置 transform-origin: center（默认即为 center，但建议显式声明增强可读性）；
- 所有尺寸（width/height/border-radius）建议使用 em 或 rem 配合 vw/vh 实现响应式，而非固定像素值；
- 动画触发前，务必确认父容器（.inner-circle）设置了 overflow: hidden（虽本例未溢出，但属最佳实践）。
最终效果：.inner-inner-circle 将以 .inner-circle 几何中心为锚点，平稳完成 360° 圆周旋转，全程不越界、无抖动，真正实现「在父容器内旋转」的设计目标。
