CSS定位div时破坏旋转动画，正方形转椭圆过程向左偏移如何解决

问题原因 #

你遇到的偏移问题确实和修改width属性直接相关：

• 默认情况下CSS盒模型的尺寸调整以元素左上角为锚点，宽度缩小时会自然向左收缩，出现左上角固定的视觉效果
• 你同时使用了transform: rotate()，旋转的默认原点是元素中心，和尺寸调整的锚点不一致，两者叠加就出现了异常偏移

最优解决方案 #

不要直接修改width属性，改用transform的scaleX实现水平压扁效果，transform属性的所有变换都基于元素初始尺寸和中心原点计算，不会触发布局重排，性能更好也不会出现偏移。
完整示例代码如下：

元素基础样式

.target-square {
  /* 初始正方形尺寸示例，可自行调整 */
  width: 10rem;
  height: 10rem;
  background-color: #2385bb;
  /* 动画配置 */
  animation: squarestuff 2s ease-in-out infinite;
}

修正后的@keyframes

@keyframes squarestuff {
  50% {
    transform: rotate(180deg) scaleX(0.5);
    border-radius: 50%;
  }
}

注：scaleX(0.5)对应你原代码中宽度从10rem变为5rem的比例，如果你的初始宽度不是10rem，调整scaleX的参数即可，参数值=目标宽度/初始宽度。

特殊场景兼容方案 #

如果你确实需要修改元素的实际物理宽度而非仅做视觉缩放，可以给元素添加居中定位样式，保证尺寸变化时中心位置固定：

.target-square {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 其余基础样式保持不变 */
}

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