本文详解如何利用 css 3d 变换（perspective + preserve-3d）与 scroll 事件联动，实现平滑、高性能的“纸张从插槽中迎面弹出”的视差动画，无需多图切帧，告别 class 切换陷阱。
要实现视频中那种纸张随滚动“从插槽中立体弹出、逼近用户”的 3D 效果，核心不在于切换多个图片或频繁增删 class，而在于用单一 DOM 元素 + 基于滚动进度的连续 CSS 3D 变换。这种方式更流畅、更易维护，且避免了原代码中多重 scroll 监听器嵌套、赋值运算符误用（= 应为 ===）、选择器错误（’position_1′ 缺少 . 或 #）、以及未定义 child 变量等常见问题。
✅ 正确思路如下：
-
结构精简：仅需一个
包裹一张纸张图片（或纯 CSS 绘制）；CSS 3D 基础设置：
- 父容器添加 perspective: 1000px（定义 3D 视角深度）；
- .paper 设置 transform-style: preserve-3d，确保子元素（如伪元素或内层容器）保持 3D 空间；
- 使用 translateZ() 控制前后纵深，rotateX()/rotateY() 模拟纸张倾斜，scale() 增强逼近感。
滚动驱动动画：监听 scroll 事件，将 window.scrollY 映射为 [0, 1] 范围的归一化进度值（progress），再线性或缓动映射到 translateZ、rotateX 等属性值。
