CSS项目实战之圆形菜单导航_绝对定位与变换属性初探

真正稳的圆形菜单实现是用 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 更安全，后者容易多触发一次层叠上下文

IE11 或老版 Safari 下 transform 旋转错位

transform-origin 默认是 50% 50%，但在 IE11 和 Safari ≤ 9 中，如果父容器没设 width/height 或含 display: inline，计算基准会漂移，导致所有子项绕着左上角转。

这不是 bug，是这些引擎对「未明确尺寸容器中百分比原点」的解析差异。

• 确保菜单容器有明确的 width 和 height，哪怕只是 width: max-content; height: max-content
• 给每个菜单项显式设 transform-origin: center（不要依赖默认值）
• 避免用 vw/vh 单位定义半径，IE11 在某些缩放比例下会四舍五入失真，改用 rem 或固定 px

实际做下来，最难调的往往不是角度公式，而是 transform 触发的层叠上下文和老浏览器里 origin 的隐式计算逻辑——这两处不动手测一遍真没法信文档。