transform: rotate() 仅实现元素绕自身 transform-origin 的自转，非圆周运动；真圆周运动需结合 translateX/Y 与三角函数计算坐标，或用 @keyframes 预设关键帧、offset-path 路径动画、或 JS + requestAnimationFrame 动态更新位置。
transform-rotate 本身不产生圆周运动，只是旋转元素自身
很多人一看到 transform: rotate() 就以为能“绕着某点转圈”，其实它只让元素绕自己的 transform-origin 点自转。想让一个元素（比如小球）真正沿圆形路径移动，本质是「位置变化」，不是「自身旋转」。必须配合 translateX() 和 translateY()，用三角函数算出每帧的坐标，再通过 @keyframes 驱动。
实现圆周运动的核心：用 calc() 或预计算坐标 + animation-timing-function
CSS 原生不支持运行时三角运算，所以有两条路：
- 用 CSS
calc()配合 CSS 自定义属性（--angle）+rotate()+translate()组合，但需搭配transform-origin调整参考系——这要求父容器先rotate()，子元素反向rotate()抵消自转，再用translate()“甩出去”； - 更可靠的是直接预设关键帧：比如 0% → 100% 分 36 帧（每 10° 一帧），用
translateX(calc(100px * cos(0deg))) translateY(calc(100px * sin(0deg)))写死坐标（注意：CSS 不支持 cos/sin 函数，所以实际得手算或用 JS 生成，或改用path()+offset-path（Chrome/Edge 支持））。
最简可行方案（兼容性好）：
@keyframes orbit {
0% { transform: translate(200px, 0) rotate(0deg); }
25% { transform: translate(0, 200px) rotate(90deg); }
50% { transform: translate(-200px, 0) rotate(180deg); }
75% { transform: translate(0, -200px) rotate(270deg); }
100% { transform: translate(200px, 0) rotate(360deg); }
}然后给元素设 transform-origin: 0 0，并确保其父容器是圆心位置（用 position: relative 定位）。
transform-origin 的作用对象容易搞错：它影响的是当前元素的 transform 基准点，不是轨道中心
常见错误是把 transform-origin: 50px 50px 设在子元素上，指望它绕父容器左上角转——没用。真正起作用的是：该元素自身的变换（translate + rotate）都以这个点为原点。所以正确做法是：
- 让子元素的
transform-origin保持默认50% 50%（即自身中心）； - 把整个动画逻辑“外包”给父容器：父容器设
transform-origin: center，并rotate()；子元素用translate()拉出半径距离，同时加反向rotate()防止自身朝向随父容器转动（否则小球会“脸跟着转”）； - 如果要用
offset-path，transform-origin完全无关——路径中心由offset-distance和offset-path: path('M0,0 A100,100 0 1,1 0,-200')决定。
性能与兼容性取舍：requestAnimationFrame vs CSS animation vs offset-path
纯 CSS @keyframes 动画在低帧率设备上可能卡顿，且无法动态改半径/速度；offset-path 是真路径动画，支持 offset-rotate 控制朝向，但 Safari 全面不支持；最稳的仍是 JS + transform: translate() 实时计算，用 requestAnimationFrame 更新 style.transform。例如：
let angle = 0;
function animate() {
angle += 0.02;
ball.style.transform = `translate(${200 * Math.cos(angle)}px, ${200 * Math.sin(angle)}px)`;
requestAnimationFrame(animate);
}这样既能精确控制，又避免了 CSS 关键帧的僵硬和兼容问题。
圆周运动真正的复杂点不在 rotate，而在坐标系切换和朝向管理——多数人卡在“为什么小球一边转一边歪着跑”，其实是忘了抵消父级 rotate 对子元素的影响，或者误把 transform-origin 当成了轨道圆心。
立即学习“前端免费学习笔记（深入）”；
