扇形菜单用transform: rotate()与translateX()将li沿圆周定位，需统一transform-origin、反向旋转纠偏文字，并通过opacity和transform过渡实现展开收起；须用JS管理状态、焦点及可访问性属性，响应式需按屏宽降级布局并用动态单位适配缩放。
用 CSS transform + rotate 实现扇形菜单的定位
圆形导航菜单本质是把 <li> 元素沿圆周等分排列，不是靠图片或 SVG 拼出来的。最可靠的方式是用 transform: rotate() 配合 translate() 把每个菜单项“甩”到圆周上——先绕中心旋转角度，再沿 X 轴平移半径距离，最后反向旋转抵消文字歪斜。
常见错误是只用 rotate() 不加 translate()，结果所有菜单项叠在圆心；或者忘了用 transform-origin: 0 0 统一旋转原点，导致旋转轴错乱。
- 设菜单项共
n个，则每项旋转角度为360deg / n，第i项（从 0 开始）旋转i * (360deg / n) -
translateX(120px)中的120px是圆半径，需和容器width/height匹配 - 文字方向要还原：在
translateX()后补一句rotate(-i * (360deg / n))
用 CSS transition 控制扇形展开/收起动画
扇形菜单的“展开”不是 JavaScript 动态插入 DOM，而是靠 opacity 和 transform 的 CSS 过渡。关键在于：所有菜单项初始状态必须是 opacity: 0 且 transform: rotate(...) translateX(0)（即缩在圆心），点击后统一改为 translateX(120px) 并设 opacity: 1。
容易踩的坑是给每个 <li> 设置不同 transition-delay 来制造逐个飞出效果，但延迟值写死会导致响应式失效；更稳妥的做法是用 JS 动态计算并设置 style.transitionDelay，或改用 @keyframes 配合 animation + animation-fill-mode: forwards。
立即学习“前端免费学习笔记（深入）”；
- 过渡属性必须明确写成
transition: opacity 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)，不能只写transition: all，否则会触发重排 - 收起时若直接移除类名，浏览器可能跳过动画，应先触发 reflow（如读取
offsetHeight），再移类 - 移动端需加
touch-action: manipulation防止点击延迟
用 JavaScript 控制菜单开关状态与焦点管理
纯 CSS 无法判断“当前是否展开”，所以必须用 JS 维护一个布尔状态，并在点击按钮时切换 aria-expanded、aria-hidden 和菜单容器的 inert 属性。否则屏幕阅读器无法感知状态变化，键盘用户按 Tab 仍会聚焦到隐藏菜单项。
另一个常被忽略的点是：扇形展开后，焦点应自动落到第一个菜单项，且按 Esc 键必须能收起菜单并把焦点还给触发按钮。
- 监听
click外部区域关闭菜单时，别用document.addEventListener('click')，而要用事件委托 +e.target.closest()判断是否点在菜单容器外 - 每个
<a></a>必须有tabindex="-1"，展开时改为tabindex="0"，收起时再设回-1 - 避免在
transitionend里直接操作 DOM，优先用getComputedStyle(el).opacity判断动画是否真正结束
适配高缩放比和小屏设备的关键细节
扇形菜单在 zoom: 125% 或 iPhone Safari 缩放后经常错位，根本原因是 transform 的像素计算受设备像素比影响。解决方案不是禁用缩放，而是把半径单位从 px 改为 rem 或 em，并确保根字体大小随缩放同步调整。
小屏下扇形角度太小会导致文字挤压甚至重叠，这时不应强行撑开角度，而应降级为环形（circle）→ 半圆（semicircle）→ 垂直列表（vertical list）的三层响应式策略。
- 用
@media (max-width: 480px)直接将菜单设为flex-column垂直排列，而非硬调角度 - 避免用
vmin设定半径，它在横屏手机上会把菜单压扁；改用min(max(80px, 10vw), 120px)更稳 - SVG 图标比字体图标更适合扇形菜单，因为
transform对 SVG 的<use></use>元素支持更一致
扇形菜单真正的难点不在“怎么画圆”，而在状态同步、可访问性补全和缩放鲁棒性——这三块不处理好，视觉再炫也等于没做。
