CSS加载器SVG旋转动画的居中失效及适配问题求解

核心问题根因 #

• transform属性覆盖冲突：CSS中transform为全量赋值机制，关键帧内定义的rotate旋转值会完全替换掉原本用于居中的位移偏移，动画启动后居中定位直接失效
• 绝对定位居中逻辑不完整：当前设置top:50%; left:50%仅将元素左上角锚定到容器中心，未通过translate(-50%, -50%)抵消元素自身尺寸，本身未实现真正居中
• 旋转参考点设置错误：transform-origin: -50% 50%的负x坐标会将旋转中心偏移到SVG元素左侧外部，不在图形几何中心位置，旋转时必然出现环绕漂移

可稳定运行的实现代码 #

调整思路：用容器flex布局实现居中，从根源上避免居中逻辑与旋转动画的transform冲突；修正旋转参考点，匹配SVG自身坐标系。

#hexagon-spinner {
  position: fixed;
  inset: 0; /* 替代原有的top/bottom/left/right写法 */
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  /* 新增flex居中逻辑，无需依赖transform实现定位 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hexagon-loader {
  animation: spin 0.8s linear infinite;
  /* 直接对准SVG几何中心，避免百分比参考系差异 */
  transform-origin: center;
  /* 固定和viewBox匹配的尺寸，避免缩放导致旋转中心偏移 */
  width: 65.103px;
  height: 75.174px;
}

/* 标准旋转关键帧，0到360度无卡顿衔接 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 兼容webkit内核前缀 */
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

可选：保留原绝对定位方案的修正写法 #

如果不想改动外层容器的定位逻辑，必须将居中偏移和旋转动作合并到同一个transform值中，避免被动画覆盖：

#hexagon-spinner {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
}

.hexagon-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  /* 必须先写居中位移，再写旋转，避免旋转中心偏移 */
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

注意：transform的顺序会直接影响最终效果，位移操作必须放在旋转之前，否则旋转参考点依然会错位。

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