最可行方案是用 transform: rotatex()/rotatey() 配合 devicemotion 事件获取 rotationrate.beta/gamma，经滤波后映射为 css 变量控制倾斜，但仅限授权后的真机环境，需处理权限、兼容性及平滑问题。
直接用 transform: rotateX() 和 rotateY() 配合设备 devicemotion 事件是最可行的路径，但别指望它在桌面端生效——这个能力只在真实移动设备（且用户授予权限）下可用。
监听 devicemotion 事件获取陀螺仪数据
浏览器通过 devicemotion 提供加速度和旋转速率，但要注意：它返回的是设备坐标系下的原始值，不是屏幕朝向角度。真正能映射为 UI 倾斜的是 rotationRate.beta（前后倾）和 rotationRate.gamma（左右倾），单位是度/秒，需积分或低通滤波才能稳定使用。
- 必须在用户手势（如点击、触摸）后首次调用
requestPermission()，否则 iOS Safari 和新版 Android Chrome 会静默拒绝 - 不要直接用
accelerationIncludingGravity算倾斜角——它含重力分量，抖动大，响应滞后 - 建议用指数滑动平均（
alpha = 0.1）平滑beta/gamma值，避免 UI 抖动 - Chrome WebView 和某些国产浏览器可能不触发该事件，需 fallback 到
deviceorientation（但精度更低、兼容更差）
把 beta/gamma 映射为 CSS 变量并应用 transform
硬编码 rotateX() 和 rotateY() 容易翻车：角度太大导致元素“飞走”，太小又没反馈。推荐用 CSS 自定义属性做中间层，再由 JS 动态更新，保持样式与逻辑解耦。
- 在根元素设默认变量：
:root { --rx: 0deg; --ry: 0deg; } - JS 中更新：
document.documentElement.style.setProperty('--rx', `${-beta * 0.5}deg`)（负号让前倾对应上仰） - CSS 中绑定：
.tilt-element { transform: rotateX(var(--rx)) rotateY(var(--ry)) perspective(800px); } -
perspective值不能太小（1500px 倾斜感弱），800px 是较稳的起点
绕不开的兼容性与权限陷阱
这个效果天生脆弱：iOS 要求 HTTPS + 用户交互触发 + DeviceMotionEvent.requestPermission 显式调用；Android Chrome 从 90+ 版本起也强制要求同源手势启动；桌面端基本全挂。
- 检查是否支持：
'ondevicemotion' in window或typeof DeviceMotionEvent !== 'undefined' - 权限请求必须由用户手势触发（如
button.addEventListener('click', ...)），不能 onload 自动调 - iOS Safari 不支持
rotationRate，得降级用deviceorientation的beta/gamma（注意：它是绝对角度，非角速度） - 测试时务必关掉「减少运动」系统设置，否则部分设备会禁用 motion 事件
真正难的不是写那几行 transform，而是处理权限弹窗时机、平滑滤波参数、以及当用户转头看别处时 UI 还在狂转的尴尬——这些没法靠 CSS 解决，得靠 JS 控制采样节奏和阈值截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
