真正稳的圆形菜单实现是用 rotate() 配合 translate() 组合位移：先 rotate 定位到圆周，再 translate 半径距离，最后反向 rotate 抵消文字倾斜；需设 --item-count 变量统一控制角度，用 ::before 扩大热区并设 pointer-events: none，且通过外层容器统一管理 z-index 避免层叠上下文断裂。
圆形菜单怎么让子项等分角度排布
靠 transform: rotate() 手动算角度容易错，尤其加减菜单项后全乱。真正稳的办法是用 CSS 自带的 rotate() 配合 translate() 组合位移——每个子项先平移到圆周位置，再反向旋转抵消自身朝向偏移，这样文字始终正立。
常见错误：只用 rotate() 转父容器，结果所有子项一起歪，文字也斜着；或者用 JS 算角度后硬写 style.left/top，响应式一缩放就脱标。
- 假设有 6 个子项，用
--item-count: 6定义 CSS 变量，每个项的旋转角度 =calc(360deg / var(--item-count)) - 每个
<li>设position: absolute，然后：transform: rotate(calc(var(--i) * 360deg / var(--item-count))) translate(120px) rotate(calc(-1 * var(--i) * 360deg / var(--item-count)))（--i是自定义属性，按顺序设为 0、1、2…） - 注意
translate(120px)的距离必须是固定值或基于 rem，不能用百分比，否则缩放时半径不一致
点击区域小、误触多，怎么扩大热区又不遮挡动画
直接给 <a></a> 加 padding 会撑开布局、破坏圆形轨迹；用 ::before 伪元素扩大点击区更干净，但得关掉 pointer-events 避免干扰旋转动画。
典型场景：手机上拇指点不准，hover 在桌面端有效，但触摸屏没 hover，必须依赖 active 或 click 区域。
立即学习“前端免费学习笔记（深入）”；
- 给菜单项的
<a></a>加position: relative，再用<a>::before</a>绘制一个透明大圆：content: ""; position: absolute; width: 80px; height: 80px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50% - 关键一步：加
pointer-events: none到::before，否则它会拦截事件、导致内层图标点不动 - 如果用
touch-action: manipulation，能减少移动端 300ms 延迟，但 iOS Safari 旧版本不支持
绝对定位 + transform 导致 z-index 失效怎么办
一旦用了 transform（哪怕只是 translateZ(0)），元素就会创建新的层叠上下文，导致外部设的 z-index 对它无效。圆形菜单常出现“点不到底层按钮”或“弹出层被盖住”的问题，根子在这。
不是 z-index 数值不够大，是层叠上下文断了链路。
- 把菜单整体包一层无样式的
<div class="menu-container">，在这个容器上设 <code>z-index，而不是分散设在每个<li>上 - 避免对菜单项单独加
transform以外的层叠触发属性，比如opacity 、<code>filter、will-change，它们同样会新建层叠上下文 - 如果必须做入场动画（比如从中心放大），用
scale()比transform: translate + scale更安全，后者容易多触发一次层叠上下文 - 确保菜单容器有明确的
width和height，哪怕只是width: max-content; height: max-content - 给每个菜单项显式设
transform-origin: center（不要依赖默认值） - 避免用
vw/vh单位定义半径，IE11 在某些缩放比例下会四舍五入失真，改用rem或固定px
IE11 或老版 Safari 下 transform 旋转错位
transform-origin 默认是 50% 50%，但在 IE11 和 Safari ≤ 9 中，如果父容器没设 width/height 或含 display: inline，计算基准会漂移，导致所有子项绕着左上角转。
这不是 bug，是这些引擎对「未明确尺寸容器中百分比原点」的解析差异。
实际做下来，最难调的往往不是角度公式，而是 transform 触发的层叠上下文和老浏览器里 origin 的隐式计算逻辑——这两处不动手测一遍真没法信文档。
