rotateZ 为什么转不出3D感？必须配 transform-style 和 perspective
单纯用 rotateZ 只是平面旋转，看起来像老式风扇——没有纵深、没有倾斜、抽奖转盘像贴在屏幕上转。真 3D 转盘需要两个关键前提：perspective 提供观察距离，transform-style: preserve-3d 让子元素不扁平化。
-
perspective必须加在父容器（比如转盘外壳）上，值太小（如100px）会畸变，太大（如5000px）又像没透视；常用800px–1200px比较自然 -
transform-style: preserve-3d必须设在直接包裹奖品项的容器上，不是最外层也不是每个奖品项自己设 - 如果奖品项用了
position: absolute，注意它们默认脱离文档流，transform-origin会按父容器左上角算，得手动调transform-origin对齐转盘中心
奖品扇形怎么精准排布？用 rotateZ + translateZ 配合角度偏移
纯靠 rotateZ 排扇形容易错位，因为所有奖品都绕同一个点转，视觉上会堆叠或留缝。正确做法是：每个奖品先沿 Z 轴“拉出来”一点（translateZ(20px)），再绕 Y 轴微调朝向（rotateY），但更轻量的方案是只用 rotateZ，靠角度均分 + transform-origin 校准。
- 假设有 8 个奖品，每个占
45deg，第 n 个的旋转应为rotateZ(calc(n * 45deg + 22.5deg))（+22.5 是为了让文字居中对准切线方向） -
transform-origin设为50% 50% -50px（最后一位负值表示往 Z 轴后方偏移），能让旋转轴更靠近转盘物理中心，避免“飘在空中”的感觉 - 别用
%做translateZ单位，浏览器不支持；固定像素值（如20px或4vh）更可控
动画卡顿或闪动？避开 will-change 误用和 repaint 触发点
转盘高速旋转时掉帧，常见原因是浏览器频繁重绘整个转盘区域，尤其当内部有文字、阴影或 border-radius 时。不是加了 will-change: transform 就万事大吉。
- 只对真正做动画的元素加
will-change: transform，且动画开始前 1–2 帧再加，结束立即移除（用 JS 控制），长期挂着反而拖慢渲染 - 避免在旋转元素上设
box-shadow或filter: blur()，这些会强制每帧重绘图层；阴影可移到伪元素上并设transform: translateZ(0)升级为独立合成层 - 用
transform: rotateZ(...)而非left/top动画，确保走 GPU 合成；检查 DevTools 的 Layers 面板，确认转盘是否显示为独立图形层
移动端点击抽奖失灵？perspective 导致 z-index 失效的隐性问题
在 iOS Safari 或部分安卓 WebView 中，开启 perspective 后，元素的 stacking context 会重排，原来盖在转盘上的按钮可能被“压到转盘后面”，点不动。
立即学习“前端免费学习笔记（深入）”；
- 给触发按钮加
transform: translateZ(1px)，强行提一层，比盲目调z-index更可靠 - 不要把按钮放在转盘容器内部（即不要作为子元素），而是用绝对定位盖在同级，避免被
preserve-3d影响层级 - 真机测试必做：iOS 上
perspective对input和button的点击热区有收缩效应，按钮尺寸建议 ≥ 44×44px，并加cursor: pointer和-webkit-tap-highlight-color: transparent
事情说清了就结束。3D 转盘真正的坑不在旋转本身，而在透视层级、合成策略和移动端 stacking context 的隐性交互。
