环形菜单旋转展开时元素飞出去了？检查 transform-origin 是否设在圆心
环形菜单的“飞出去”本质是旋转中心点错位。每个菜单项必须围绕同一个圆心旋转，否则视觉上会散开或偏移。常见错误是直接对 li 或 button 设置 transform: rotate()，但没统一设置 transform-origin。
- 圆心坐标必须是相对于该元素自身的偏移，比如菜单项宽高都是 40px，圆心就在
transform-origin: 20px 20px - 更稳妥的做法是让所有菜单项父容器（如
.menu-ring）居中定位，再用transform-origin: center配合transform: rotate()控制整体起始角度 - 如果菜单项用绝对定位排布在圆周上，
transform-origin应设为0 0或50% 50%，取决于你用top/left还是translate定位
如何让每个菜单项按顺序依次展开？用 transition-delay 配合索引计算
CSS 本身不支持动态延迟值，所以得靠预设或 JS 注入。纯 CSS 方案只能手动写死延迟，适合固定数量菜单项；动态数量建议用 JS 计算后写入 style 属性。
- 假设 6 个子项，想每 0.1s 展开一个：第 0 个 delay
0s，第 1 个0.1s，第 2 个0.2s…… - 用 CSS 自定义属性可简化维护：
--delay: calc(var(--i) * 0.1s)，但需配合 JS 设置--i - 别用
animation-delay做逐项展开——它触发的是动画重播，不是状态过渡，容易和transform冲突 - 展开/收起状态切换时，延迟值方向要一致，否则收起时会出现“倒放错乱”
旋转 + 缩放同时动，为什么菜单项变形或抖动？transform 合并顺序很关键
CSS transform 是从右往左执行的，顺序错了会导致缩放中心偏移、旋转轴歪斜。环形菜单通常需要先缩放再旋转，或先平移到圆周再旋转。
- 错误写法：
transform: rotate(30deg) scale(1)→ 先绕自身中心转，再放大，看起来像晃动 - 正确逻辑（以圆心为基准）：
transform: translate(120px, 0) rotate(30deg) scale(1)→ 先沿 X 轴平移到半径位置，再绕原点（此时已由transform-origin定义）旋转，最后缩放 - 所有变换必须共用同一套坐标系，避免混用
%、px、em单位导致计算偏差 - 开启硬件加速（
transform: translateZ(0)）能缓解部分浏览器渲染抖动，但不能替代顺序修正
IE 或旧版 Safari 不支持 transform-origin 百分比？降级方案要留一手
IE10+ 和 Safari 9+ 支持 transform-origin: 50% 50%，但 iOS 8 及更早只认像素值。如果目标用户含老设备，得准备 fallback。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports区分：@supports (transform-origin: 50% 50%) { ... }写现代逻辑，外层写像素版 - 避免用
vw/vh算圆心——视口单位在缩放或 iframe 场景下不稳定 - 最简降级：放弃“精准圆周”，改用线性排列 + 淡入，至少功能可用
- 别依赖
will-change: transform做兼容兜底，它在旧引擎里可能引发渲染异常而非优化
环形菜单真正难的不是转起来，而是每个菜单项的 transform-origin、transform 顺序、延迟时机这三者必须咬合。漏掉任意一环，动画就只是“看起来动了”，而不是“稳稳地转开了”。
