perspective 值设 1000px 到 2000px 较稳妥，需作用于父容器并配合 transform-style: preserve-3d、transform-origin: center center 和 translatez(0) 等设置才能实现预期 3d 缩放效果。
perspective 值设多少才有效果？
太小（比如 100px）会放大畸变严重，太大（比如 9999px）几乎看不出透视感。实际中 1000px 到 2000px 是较稳妥的起点——它让 scale(0.95) 这类微缩放产生明显纵深，又不致边缘拉伸失真。
- 必须作用在「父容器」上，不是动画元素本身；否则
transform: scale()不会受透视影响 - 如果父容器是全屏
html或body，注意它们默认无高度，需加height: 100vh - 移动端 Safari 对
perspective在body上的支持不稳定，建议套一层div#stage并设perspective
scale 动画为什么不动？
常见原因是没触发硬件加速或没设 transform-style: preserve-3d。perspective 只定义观察点，但子元素默认是“扁平渲染”，缩放时仍走 2D 轨迹。
- 动画元素自身要加
transform-style: preserve-3d，否则scale无视perspective - 推荐用
transform: scale(0.98) translateZ(0)强制 GPU 加速，避免 iOS 滚动卡顿 - 不要只写
scale(0.9)—— 缺少translateZ(0)或其他 3D transform，在部分 Android 浏览器里会退化为纯 2D 缩放
切页时页面抖动或闪白？
本质是浏览器重绘策略冲突：perspective + scale 触发了层合成变化，但若页面有 fixed 元素、video 或 canvas，容易引发图层撕裂。
- 给切页容器加
will-change: transform，提前告知浏览器将做 3D 变换 - 避免在动画中同时修改
opacity和scale，二者触发不同渲染管线，iOS 上易闪屏 - 如果用了
background-attachment: fixed，切页瞬间可能回滚到顶部，建议切页期间临时设为scroll
如何让缩放中心对准视口中央？
scale 默认以元素左上角为原点，全屏切页需要以屏幕中心为缩放中心，否则看起来像偏移+缩放，不是“镜头拉远”感。
- 必须配合
transform-origin: center center，不能只靠margin: auto居中 - 如果元素本身不是 100vw × 100vh，先确保它用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh占满 - 慎用
transform: scale() translate()混写——顺序影响结果，scale总是相对于当前 transform-origin 计算，别指望 translate 能“修正”缩放中心
perspective 的解析精度差异：iPad 上 1200px 刚好，Mac Chrome 可能要 1400px 才匹配视觉预期。得留一手——用 JS 检测 window.devicePixelRatio 微调值，或者干脆用 CSS 自定义属性动态注入。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
