转盘容器必须设 position: relative，否则绝对定位的扇区会相对于 body 偏移，导致点击错位和旋转中心偏移；推荐用 SVG 实现扇区并绑定事件，CSS clip-path 易出错；旋转动画须用 transform + transition 配合贝塞尔曲线模拟惯性，移动端需加 cursor: pointer 和 touch-action: manipulation。
转盘容器必须用 position: relative 定位
否则指针和旋转动画会脱离预期位置。转盘图片或扇形区域需要作为子元素绝对定位在容器内，指针通常用一个固定在顶部的 div 或伪元素实现。如果容器没设 position: relative，position: absolute 的扇区就会相对于 body 偏移，导致点击区域错位、旋转中心偏移。
- 容器宽高建议设为相同值（如
400px），方便计算旋转中心 - 转盘图片直接用
<img>放在容器里，不额外套<div> - 指针推荐用
::after伪元素，避免 DOM 冗余
扇区点击区域要用 clip-path 或 SVG 划分
CSS 圆形裁剪 + 旋转定位是常见做法，但纯 CSS 实现 8 等分扇区时，clip-path: polygon() 手动写坐标容易算错角度和半径。更稳的方式是用 SVG：<svg> 内画 <path> 扇形，每个 <path> 绑定 onclick 或加事件监听器。SVG 天然支持路径点击检测，且旋转时不会失真。
- 不要用多个重叠的
div+transform: rotate()模拟扇区——事件捕获不可靠 - 若坚持用 CSS，每个扇区需设
transform-origin: center，且旋转角度要精确到360deg / 扇区数 - SVG 中每个扇区
<path>的d属性需动态生成，角度偏差 0.1° 都会导致点击错位
rotate() 动画必须用 transform + transition 控制
直接改 style.transform = 'rotate(3600deg)' 不会触发过渡动画；必须配合 transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1)。贝塞尔曲线选 cubic-bezier(0.25, 0.1, 0.25, 1) 是为了模拟惯性停顿效果，比线性更像真实转盘。
- 旋转总角度建议设为
n * 360 + 随机偏移（0–360），确保每次停的位置不同 - 动画结束后需读取最终
transform矩阵或用getComputedStyle解析角度，再映射到对应扇区 - 别用
animation+@keyframes控制旋转——不好中途暂停或读取状态
移动端点击失效？加 cursor: pointer 和 touch-action: manipulation
很多设备上，没显式声明交互意图的元素（比如纯 div 扇区）在 iOS Safari 或部分安卓浏览器里不响应 click。光靠 onclick 不够，得让浏览器知道这是可点区域。
立即学习“前端免费学习笔记（深入）”；
- 每个可点击扇区必须有
cursor: pointer（PC）和touch-action: manipulation（移动） - 避免用
ontouchstart替代onclick——两者触发时机和冒泡行为不一致 - 如果用 SVG，
<path>默认不响应点击，需加style="pointer-events: auto"
实际运行时最常卡在角度解析和扇区映射这一步：DOM 里看到的 transform 是矩阵字符串，不是直观的度数，手动 parse 容易出错。不如在旋转前就记下目标角度，动画结束直接查表。
