本文详解如何使用 css transform 的嵌套旋转与位移组合，为多个文字元素分别创建半径、方向、相位各异的平滑圆形运动轨迹。
在 css 中实现真正的圆形运动（circular motion），关键在于理解：圆周运动 = 绕原点旋转 + 沿径向位移。CSS 本身没有“锚点”或“极坐标动画”语法，但可通过 transform 的复合顺序（先 rotate() 再 translateX()，再反向 rotate()）模拟出以容器中心为圆心的匀速圆周路径。
✅ 核心原理：旋转—位移—反旋（Rotate-Translate-Rotate Back）
/* 以 (0, 0) 为圆心，半径 150px 的完整圆周 */ transform: rotate(0deg) translateX(150px) rotate(0deg); /* 起点：右侧 */ transform: rotate(90deg) translateX(150px) rotate(-90deg); /* 90° 后：顶部 */ transform: rotate(180deg) translateX(150px) rotate(-180deg); /* 180° 后：左侧 */? 原理说明： 第一个 rotate() 将坐标系顺时针转 θ 度； translateX(r) 沿新 X 轴正方向移动 r 像素（即指向圆周上角度 θ 处）； 第二个 rotate(-θ) 将元素自身“正过来”，保持文字始终水平朝向用户（避免倒置或歪斜）。
? 实战：三字母差异化圆形动画（X/Y/Z）
为实现「不同半径、不同方向、不同相位」效果，需为每个字母定义独立 @keyframes，并精细控制关键帧：
.animation-container { display: flex; position: relative; top: 10rem; left: 50%; transform: translateX(-50%); /* 更健壮的居中方式（替代 left: 50%） */ align-items: center; justify-content: center; width: 100%; height: 300px; /* 提供明确容器高度，便于视觉定位 */ } .letter { font-size: 2rem; font-weight: bold; position: absolute; /* 脱离文档流，统一围绕 container 中心运动 */ line-height: 1; } .letter.X { animation: move-letter_x 4s ease-in-out infinite; } .letter.Y { animation: move-letter_y 4s ease-in-out infinite; } .letter.Z { animation: move-letter_z 4s ease-in-out infinite; } /* X：大半径顺时针，起始在右 → 顶 → 右 */ @keyframes move-letter_x { 0%, 100% { transform: rotate(0deg) translateX(150px) rotate(0deg); } 25% { transform: rotate(90deg) translateX(150px) rotate(-90deg); } 50% { transform: rotate(180deg) translateX(150px) rotate(-180deg); } 75% { transform: rotate(270deg) translateX(150px) rotate(-270deg); } } /* Y：中半径逆时针（通过起始角度偏移+反向节奏实现），起始在左 → 下 → 左 */ @keyframes move-letter_y { 0%, 100% { transform: rotate(180deg) translateX(100px) rotate(-180deg); } 25% { transform: rotate(90deg) translateX(100px) rotate(-90deg); } 50% { transform: rotate(0deg) translateX(100px) rotate(0deg); } 75% { transform: rotate(270deg) translateX(100px) rotate(-270deg); } } /* Z：小半径+缓动强化，起始在下 → 右 → 下 */ @keyframes move-letter_z { 0%, 100% { transform: rotate(270deg) translateX(70px) rotate(-270deg); } 33% { transform: rotate(0deg) translateX(70px) rotate(0deg); } 66% { transform: rotate(90deg) translateX(70px) rotate(-90deg); } } X Y Z ⚠️ 关键注意事项
- 务必使用 position: absolute：所有 .letter 必须脱离文档流，否则 flex 布局会干扰位移基准；
- 容器需有明确尺寸与居中逻辑：推荐 transform: translateX(-50%) 替代 left: 50%，避免因 width 不确定导致偏移；
- 避免 -webkit- 前缀冗余：现代浏览器已全面支持标准 transform 和 @keyframes，仅保留标准属性即可；
- 性能优化：圆形动画涉及高频 transform，天然触发 GPU 加速，无需额外 will-change；但请勿对 top/left 动画——它会触发重排（reflow）；
- 可扩展性建议：如需更多字母或动态配置，推荐结合 CSS 自定义属性（–radius, –duration, –delay）与 js 控制，提升维护性。
通过合理拆分动画逻辑、精准控制各关键帧的旋转角度与位移量，你不仅能实现 XYZ 的差异化圆周舞动，更能将该模式复用于徽标动画、加载指示器、数据可视化节点等专业场景。