如何使用 CSS 动画实现元素绕自身中心 360° 旋转

本文详解如何通过纯 css 实现任意元素（如文字、图标、svg 形状）围绕自身几何中心精准旋转 360°，重点解决常见偏移问题，并提供可复用的响应式自定义光标方案。

在构建高级交互式 UI（如自定义光标系统）时，让文本或图形元素“绕自身中心匀速旋转”看似简单，实则极易因 transform-origin 设置不当、容器定位偏差或坐标计算误差导致视觉偏移——正如你在 CodePen 中观察到的：文字旋转时出现明显晃动或轨迹漂移。

核心原理在于：旋转必须基于元素自身的中心点（50% 50%），而非父容器或视口坐标。以下为经过验证的完整解决方案：

光子AI

AI电商服饰商拍平台

下载

✅ 正确实现绕自身中心 360° 旋转的三步法

1. 确保元素具有明确的尺寸与居中基准
   对于块级元素（如 .btn 或 SVG 内文本），需显式设置宽高，并通过 transform: translate(-50%, -50%) 将其锚点对齐至中心：

   .btn {
     width: 138px;
     height: 138px;
     position: fixed;
     /* 关键：将左上角锚点移至中心 */
     transform: translate(-50%, -50%);
     transform-origin: center center; /* 显式声明旋转原点 */
   }

2. 使用标准 @keyframes 定义无偏移旋转动画
   避免使用 rotateZ() 混合计算（如 calc(var(--i) * 7.05deg)），该方式易受字体渲染、子元素布局影响。应统一控制整个容器旋转：

   @keyframes spin {
     from { transform: rotate(0deg); }
     to   { transform: rotate(360deg); }
   }
   
   .btn {
     animation: spin 5s linear infinite;
   }

3. SVG 文本环形旋转：用 + transform-origin: center
   对于你代码中环绕圆周的文字（如 "Jouer la vidéo"），必须结合 SVG 的路径绑定与全局旋转：

   <div id="circle">
     <svg viewBox="0 0 300 300" width="100%" height="100%">
       <defs>
         <path id="circlePath" d="M150,150 m-60,0 a60,60 0 0,1 120,0 a60,60 0 0,1-120,0"/>
       </defs>
       <text font-size="24" fill="white">
         <textPath href="#circlePath" startOffset="0" text-anchor="middle">
           Jouer la vidéo - Jouer la vidéo -
         </textPath>
       </text>
     </svg>
   </div>

   #circle svg {
     position: absolute;
     width: 138px;
     height: 138px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: spin 5s linear infinite;
     transform-origin: center center; /* 确保 SVG 整体绕中心转 */
   }

⚠️ 常见陷阱与修复建议

• ❌ 错误做法：对每个 单独设置 transform: rotateZ(...) 并依赖 transform-origin: 0 120px —— 这会导致每个字母以不同原点旋转，破坏整体同心性。
• ✅ 正确做法：将所有文字包裹在单一容器（如
  或
• 三角形偏移问题根源：你的 .triangle 使用了 border 绘制，但未设置 transform: translate(-50%, -50%)；改用 SVG gon> 并统一应用 transform-origin: center 可彻底解决（见最终 CodePen 示例）。
• 光标同步精度：JavaScript 中应始终使用 translate3d(calc(${x}px - 50%), calc(${y}px - 50%), 0) 替代 left/top 赋值，避免因浏览器重排导致的 1px 抖动。

? 总结：可复用的最佳实践模板

.custom-rotating-cursor {
  position: fixed;
  width: 138px;
  height: 138px;
  top: 0; left: 0;
  transform: translate(-50%, -50%); /* 关键：锚定中心 */
  transform-origin: center center;   /* 关键：声明旋转原点 */
  animation: spin 5s linear infinite;
  pointer-events: none;
  z-index: 9999;
}

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

? 提示：若需暂停/播放动画（如悬停时暂停），可通过添加 .paused { animation-play-state: paused; } 类动态控制，无需 JS 操作关键帧。

通过以上结构化方案，你不仅能实现稳定、平滑、像素级精准的 360° 自转效果，还能将其无缝集成进复杂的自定义光标系统中，兼顾性能与视觉一致性。