transform-origin 坐标基于元素自身盒模型左上角，非父容器；rotate() 必须在 translateX() 前以实现圆周运动；多元素需用 CSS 自定义属性独立控制角度，避免共用 @keyframes；内容朝向歪斜需子元素反向旋转校正。
transform-origin 设错位置，元素根本不会绕预期圆心转
很多人给子元素设 transform-origin: 50px 50px，以为它就会绕父容器左上角那个点转——其实不是。这个坐标是相对于**该子元素自身盒模型左上角**的偏移，不是页面或父容器坐标系。如果子元素没显式宽高、是 inline 元素，或者被 flex/grid 挤压过，它的“自身盒模型”可能和你看到的视觉位置完全不一致。
正确做法是：先确保父容器有明确定位（position: relative），再让所有子项用 position: absolute，然后统一把它们的 transform-origin 设为 0 0 或 center center，并配合父容器的 margin: auto 居中来对齐圆心。用 DevTools 的盒子模型预览功能实时检查每个子项的渲染尺寸和 origin 点是否落在你想要的旋转中心上。
rotate() 和 translate() 顺序颠倒，路径直接变成直线或乱飞
想让一个元素从圆心“甩”到圆周上，必须先 rotate() 坐标系，再 translateX(var(--radius)) 沿新 X 轴推出去。反过来写（translateX() rotate()）会让位移始终朝原始 X 方向，结果是所有元素横向排成一排，再各自原地打转。
常见错误场景：
- 用 JS 动态生成样式时，字符串拼接顺序写反了
- 在 CSS 变量里混用
calc()，比如transform: translateX(calc(var(--radius) * cos(var(--angle)))) rotate(var(--angle))—— 这种写法无效，因为 CSS 不支持cos() - 动画关键帧里只写
rotate()，漏掉translateX()，导致只是自转，不走轨道
多个子项共用同一份 @keyframes，动画互相覆盖或错位
CSS 动画名是全局作用域。如果你给 6 个菜单项都写 animation: orbit 4s linear infinite;，但只定义了一次 @keyframes orbit，那它们会全部按同一套轨迹跑，无法实现错峰展开或角度偏移。
更可靠的做法是不用 @keyframes，改用 CSS 自定义属性驱动单个元素的变换：
div:nth-child(1) { --i: 0; }
div:nth-child(2) { --i: 1; }
/* ... */
div {
transform: rotate(calc(360deg / var(--total) * var(--i)))
translateX(var(--radius));
}
其中 --total 是总数，--radius 是统一半径。这样每个元素独立计算角度，不依赖全局动画名，也更容易加 delay 或 reverse。
文字或图标朝向歪斜，用户读起来费劲
当元素沿圆弧排列后，它自身的 rotate() 会让内容跟着倾斜。比如一个按钮转到顶部时文字是正的，转到底部时就上下颠倒了。这不是 bug，是坐标系旋转的自然结果。
解决方法是在内容层加一层反向旋转：
.menu-item > span {
transform: rotate(calc(-1 * var(--angle)));
}
注意：这层反向旋转必须写在子元素上，且不能和外层的轨道旋转写在同一行 transform 值里（否则会被合并抵消）。同时要确保 transform-origin 一致，否则旋转轴心错位会导致文字“漂移”。
绕圆心排布这件事，表面看是数学问题，实际卡点全在坐标系理解是否准确——浏览器不会替你猜“你想绕哪转”，它只认你写的那个 transform-origin 坐标和 transform 执行顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
