本文详解如何使用纯 css 为多个文字元素（如 xyz）创建各自独立的圆形运动轨迹——通过组合 `rotate()` 与 `translatex()` 变换，并为每个字母定义专属关键帧动画，实现不同半径、方向与节奏的循环圆周运动。
在 CSS 中模拟真实圆形运动的关键在于理解：单靠 translateX() 或 translateY() 只能实现直线位移；而要让元素绕固定原点（即父容器中心）做圆周运动，必须借助 transform 的复合变换顺序——先旋转父级坐标系，再沿 X 轴平移，最后反向旋转以保持文字朝向不变。其数学本质是：rotate(θ) translateX(r) rotate(-θ)，等效于将元素在旋转后的坐标系中沿“当前 X 轴”移动距离 r，从而形成以原点为中心、半径为 r 的圆周轨迹。
以下是一个可直接运行的完整示例，为字母 X、Y、Z 分别配置差异化的圆形动画：
<div class="animation-container"> <div class="letter X">X</div> <div class="letter Y">Y</div> <div class="letter Z">Z</div> </div>
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
transform: translateX(-50%); /* 更可靠的水平居中方式 */
align-items: center;
justify-content: center;
height: 200px; /* 提供足够空间容纳圆形路径 */
overflow: visible;
}
.letter {
font-size: 2rem;
font-weight: bold;
position: absolute; /* 各字母脱离文档流，统一围绕 container 中心运动 */
width: 2em;
text-align: center;
}
.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);
}
50% {
transform: rotate(180deg) translateX(30px) rotate(-180deg);
}
}
/* Y：逆时针中半径圆，起始在左侧（通过初始 rotate(360deg) 等效于 0，但动画方向由插值决定）*/
@keyframes move-letter_y {
0%, 100% {
transform: rotate(0deg) translateX(-120px) rotate(0deg);
}
25% {
transform: rotate(90deg) translateX(-80px) rotate(-90deg);
}
50% {
transform: rotate(180deg) translateX(-120px) rotate(-180deg);
}
75% {
transform: rotate(270deg) translateX(-160px) rotate(-270deg);
}
}
/* Z：上下浮动式椭圆路径（Y 方向偏移 + X 圆周），增强视觉层次 */
@keyframes move-letter_z {
0%, 100% {
transform: rotate(0deg) translateX(0) translateY(0) rotate(0deg);
}
25% {
transform: rotate(90deg) translateX(100px) translateY(-40px) rotate(-90deg);
}
50% {
transform: rotate(180deg) translateX(0) translateY(0) rotate(-180deg);
}
75% {
transform: rotate(270deg) translateX(-100px) translateY(40px) rotate(-270deg);
}
}✅ 关键要点说明：
- ✦ position: absolute + transform: translateX(-50%) 是确保所有字母真正围绕同一中心（.animation-container 几何中心）运动的前提；
- ✦ 每个 @keyframes 至少需 3 个关键帧（0%、50%、100%） 才能构成闭合路径，避免“跳跃回原位”；
- ✦ 使用 transform 而非 -webkit-transform（现代浏览器已全面支持标准属性），仅在必要时添加前缀；
- ✦ 若需控制起始角度或运动方向，调整 rotate() 的起始/终止值（如 rotate(90deg) → rotate(450deg) 表示顺时针转一圈）；
- ✦ 半径差异通过 translateX() 值体现（如 150px vs 80px），方向差异由 rotate() 插值路径决定（CSS 自动选择最短旋转路径，可通过 animation-timing-function 或补全中间帧微调）。
? 进阶提示： 如需更精准控制（如正弦/余弦级圆周），可结合 CSS @property（支持动画自定义属性）或改用 SVG <animateTransform>；但在绝大多数交互动效场景中，上述 rotate + translateX + rotate 组合已足够灵活、性能优异且兼容性良好（支持 Chrome 4+, Firefox 16+, Safari 9+）。
立即学习“前端免费学习笔记（深入）”；
