如何用CSS修正MDI刷新图标旋转时的偏移晃动问题？

你遇到的问题核心是图标视觉重心和元素几何中心不重合，直接用transform: rotate()会绕几何中心旋转，导致视觉上的晃动。要解决这个问题，关键是让旋转围绕图标实际的视觉重心进行，有两种简单的CSS方案：

方案一：复合变换（平移+旋转） #

先通过translate()把图标偏移，让视觉重心对齐元素的几何中心，再在同一个transform属性里添加旋转动画。因为CSS变换按从右到左的顺序应用（实际渲染时先执行translate，再执行rotate），旋转会围绕调整后的重心进行，偏移会跟着旋转同步生效。

示例代码：

/* 数值根据你的图标实际调整，这里假设需向左上各偏移2px对齐重心 */
.mdi-refresh {
  animation: spin-with-offset 1s linear infinite;
}

@keyframes spin-with-offset {
  0% {
    transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(2px, 2px) rotate(360deg);
  }
}

方案二：调整旋转原点（transform-origin） #

直接把旋转的原点设置为图标的视觉重心位置，不用额外平移，旋转时就会围绕这个点转动，从根源避免晃动。

示例代码：

/* 用calc计算相对于元素中心的偏移，数值按需调整 */
.mdi-refresh {
  transform-origin: calc(50% - 2px) calc(50% - 2px);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

怎么确定偏移数值？ #

打开浏览器开发者工具，选中图标元素，手动调整translate的像素值或者transform-origin的坐标，边调边预览旋转效果，直到图标旋转时不再出现晃动即可。

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