使用CSS transform:rotate旋转Unicode图标后出现位置下移问题求助

从你提供的前后效果截图来看，偏移量不大，符合行内元素变换后的渲染偏差特征，具体问题和修复方案如下：

问题根因 #

1. Unicode字符默认属于行内（inline）元素，CSS Transform对行内元素的渲染基准受文本基线、行高等因素影响大，没有固定的盒模型边界，旋转后很容易出现位置偏移。
2. 你给动画设置了forwards属性，会让元素永久停在动画100%帧的状态，虽然理论上rotate(-360deg)和rotate(0deg)视觉完全一致，但浏览器对行内元素的变换状态计算存在偏差，会保留异常的位置偏移。
3. 没有显式指定变换原点，默认的中心计算逻辑对文本元素不固定，进一步加剧偏移问题。

修复步骤 #

1. 给目标元素添加基础CSS样式

先把元素转为行内块元素，固定变换基准：

#resetButtonSvg {
  display: inline-block;
  transform-origin: center;
  line-height: 1;
  /* 若仍有细微偏移可手动调整对齐方式 */
  vertical-align: middle;
}

2. 调整动画触发逻辑

移除没必要的forwards参数，同时每次触发动画前先重置状态，避免多次点击动画不生效的问题：

function spin() {
  const resetIcon = document.getElementById("resetButtonSvg");
  // 清空原有动画
  resetIcon.style.animation = "none";
  // 强制浏览器重绘，确保重置生效
  void resetIcon.offsetWidth;
  // 重新挂载动画
  resetIcon.style.animation = "spin360 0.5s ease";
}

可选兼容优化

如果需要兼容老旧浏览器，可在动画结束后主动清除动画属性，避免残留状态：

function spin() {
  const resetIcon = document.getElementById("resetButtonSvg");
  resetIcon.style.animation = "none";
  void resetIcon.offsetWidth;
  resetIcon.style.animation = "spin360 0.5s ease";
  // 动画时长结束后清除属性
  setTimeout(() => {
    resetIcon.style.animation = "none";
  }, 500);
}

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