推荐转盘DOM结构为：外圈固定（指针、按钮），内圈纯transform旋转（扇区）；停转需用cubic-bezier缓动+整数倍角度+Math.round防虚化；中奖判断应预存targetIndex而非读DOM；移动端须禁用按钮+状态锁+硬件加速。
转盘 DOM 结构怎么写才支持旋转动画
直接用 <div> 套 <ul><li> 切分扇区，是最容易出问题的写法——CSS transform: rotate() 作用在父容器上时，子元素文字会跟着歪，点击区域也错位。真正能稳住的结构是：一个固定不动的外圈（指针、按钮），一个纯靠 transform: rotate() 转动的内圈（奖品扇区），两者完全分离。
推荐这样组织：
<div class="wheel-container"> <div class="wheel"></div> <!-- 可旋转的扇区容器 --> <div class="pointer"></div> <!-- 固定指针 --> <button id="spin-btn">开始抽奖</button> </div>
其中 .wheel 里用 <div class="sector"> 拼出 8 个扇区，每个 sector 用 background-color + clip-path: polygon() 或绝对定位遮罩实现视觉切分，别依赖 border 或 outline ——它们在旋转后会像素模糊。
怎么让 rotate 动画停在指定角度且不抖动
CSS transition: transform 4s cubic-bezier(0.33, 0.66, 0.66, 1) 是关键。硬写 linear 会匀速转到底，用户感觉“刹不住”；用这个缓动函数，最后 20% 角度会明显减速，模拟真实转盘惯性停顿。
立即学习“前端免费学习笔记（深入）”；
但更关键的是：最终停下的角度必须是 360° ÷ 扇区数 的整数倍（比如 8 区就是 45° 倍数），否则视觉上奖品会“卡缝里”。计算逻辑要这样：
- 先生成随机奖品索引
index（0～7） - 目标旋转角度 =
- (index * 45 + 45/2 + 360 * 5)（+22.5° 补中心偏移，+1800° 保证至少转 5 圈） - 用
element.style.transform = `rotate(${angle}deg)`设置，别用 class 切换——class 有延迟、不可控
注意：浏览器对小数角度渲染不稳定，Math.round(angle) 后再赋值，避免 44.99999° 导致扇区边缘虚化。
抽完怎么准确判断中了哪个奖品
别在旋转结束后再去读 DOM 角度并除以 45 ——getComputedStyle 返回的 transform 矩阵在不同浏览器里解析方式不同，iOS Safari 经常返回 none 或不完整矩阵。
可靠做法是：旋转开始前就记下本次目标 index，转完直接用它查奖品数组：
const prizes = ['一等奖', '谢谢参与', '二等奖', ...];<br>const targetIndex = Math.floor(Math.random() * 8);<br>// …启动旋转…<br>// 动画结束回调里：<br>alert(`恭喜获得：${prizes[targetIndex]}`);如果业务需要“伪随机”（比如控制中奖率），就把 targetIndex 改成从加权数组里抽，而不是用 Math.random() 直接算。
移动端点击没反应或连点多次触发怎么办
移动端 click 事件有 300ms 延迟，且手指松开瞬间可能触发多次 touchend → click。直接绑定 onclick 必翻车。
必须做两件事：
- 给按钮加
touchstart事件，并在回调开头立刻btn.disabled = true - 转盘动画结束回调里再
btn.disabled = false，别依赖setTimeout估时间 - 额外加一层状态锁：
let isSpinning = false，点击前检查，避免 JS 层重复调用
另外，iOS 上 transform 动画默认不启用硬件加速，得手动加 will-change: transform 或 translateZ(0)，否则低端机转起来掉帧明显。
