html无法实现抽奖转盘交互，需javascript控制逻辑与角度计算、css实现动效；正确做法是用requestanimationframe累加角度并配合缓动函数，结合360°取模确定中奖扇区，严格按比例分配扇区角度，注意移动端事件拦截与dom更新时机。
HTML 本身做不了抽奖转盘——它只是骨架，真正转动、计时、中奖逻辑都得靠 JavaScript 控制，CSS 负责视觉动效。直接写纯 HTML 标签不可能实现可交互的转盘。
用 transform: rotate() 做转盘动画但停不准？
很多人用 CSS 动画写个无限旋转，再靠 animation-play-state 暂停，结果停在哪儿全看浏览器帧率，根本没法控制最终角度。这不是“不准”，是设计错误——CSS 动画不暴露运行时角度，也没法精确指定停在 127° 这种非整数倍位置。
- 正确做法：用
requestAnimationFrame或setTimeout手动累加角度，最后用element.style.transform = 'rotate(' + finalAngle + 'deg)'一次性设置 - 必须加缓动函数（如
cubic-bezier(0.33, 1.5, 0.67, 1)），否则突然刹车像卡顿 - 别用
transition配合 class 切换——它无法动态计算终点角度，中奖格子一多就对不上
Math.random() 直接选中奖项？概率会歪
转盘不是随机选一个奖品再算角度，而是让指针“经过”若干圈后落在某个扇区。如果直接 Math.random() * prizes.length 取索引，等于把物理转盘简化成抽签，丢失了“转起来”的真实感，用户也看不出哪格被选中。
- 真实逻辑：先定总转圈数（比如 3 圈 = 1080°），再加一个随机偏移量（0–360°），最后对 360 取模，落到哪个扇区就中哪个奖
- 每个扇区角度要严格按比例分配：
sectorAngle = 360 / prizes.length，不能四舍五入到整数度，否则最后一格会错位 - 注意 DOM 更新时机：
rotate设置后立即读getBoundingClientRect()可能拿不到新位置，得用setTimeout(..., 0)或queueMicrotask
移动端点不动、转盘飞走？检查这三处
PC 上好好的转盘，放到手机上一点就跳到页面顶部，或者手指一划整个页面跟着拖拽，本质是事件没拦截或 touch 行为冲突。
- 给转盘容器加
touch-action: none，禁用浏览器默认拖拽 - 监听
touchstart时立刻调用event.preventDefault()，否则 iOS Safari 会触发惯性滚动 - 别用
click触发抽奖——移动端 click 有 300ms 延迟，且可能被touchend冲突掉；统一用touchend+mousedown双绑定
最易被忽略的是扇区边界判定：角度计算要用浮点数全程参与，中间别转成整数；另外，转盘图片或 SVG 的中心点必须和 CSS transform-origin 完全重合，差 1px 就会导致“看着停在A格，实际判定在B格”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
