本文详解如何利用 css 3d 变换（perspective + preserve-3d）与 scroll 事件联动，实现平滑、高性能的“纸张从插槽中迎面弹出”的视差动画，无需多图切帧，告别 class 切换陷阱。

要实现视频中那种纸张随滚动“从插槽中立体弹出、逼近用户”的 3D 效果，核心不在于切换多个图片或频繁增删 class，而在于用单一 DOM 元素 + 基于滚动进度的连续 CSS 3D 变换。这种方式更流畅、更易维护，且避免了原代码中多重 scroll 监听器嵌套、赋值运算符误用（= 应为 ===）、选择器错误（'position_1' 缺少 . 或 #）、以及未定义 child 变量等常见问题。

✅ 正确思路如下：

1. 结构精简：仅需一个

   包裹一张纸张图片（或纯 CSS 绘制）；

2. CSS 3D 基础设置：

   

   cn-json-diff

   比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

   下载
   • 父容器添加 perspective: 1000px（定义 3D 视角深度）；
   • .paper 设置 transform-style: preserve-3d，确保子元素（如伪元素或内层容器）保持 3D 空间；
   • 使用 translateZ() 控制前后纵深，rotateX()/rotateY() 模拟纸张倾斜，scale() 增强逼近感。

3. 滚动驱动动画：监听 scroll 事件，将 window.scrollY 映射为 [0, 1] 范围的归一化进度值（progress），再线性或缓动映射到 translateZ、rotateX 等属性值。

示例关键代码：

/* style.css */
.slot {
  height: 100vh;
  perspective: 1200px;
  overflow: hidden;
}

.paper {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.05s ease-out; /* 微延迟提升流畅感 */
}

/* 初始状态：纸张在插槽后方，微倾斜 */
.paper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("paper.png") center/contain no-repeat;
  transform: translateZ(0);
}

.paper {
  transform: translateZ(-800px) rotateX(15deg) scale(0.7);
}

// script.js
const paper = document.querySelector('.paper');

function updatePaperPosition() {
  const scrollTop = window.scrollY;
  const maxScroll = document.body.scrollHeight - window.innerHeight;
  const progress = Math.min(scrollTop / maxScroll, 1); // 归一化 [0,1]

  // 映射滚动进度 → Z轴位移（-800px → 0px）、旋转（15° → 0°）、缩放（0.7 → 1.0）
  const z = -800 + progress * 800;
  const rotX = 15 - progress * 15;
  const scale = 0.7 + progress * 0.3;

  paper.style.transform = `translateZ(${z}px) rotateX(${rotX}deg) scale(${scale})`;
}

// 使用 requestAnimationFrame 优化性能（推荐）
let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      updatePaperPosition();
      ticking = false;
    });
    ticking = true;
  }
});

// 初始化一次
updatePaperPosition();

⚠️ 注意事项：

• 避免在 scroll 中直接操作 style.transform 多次（原代码中重复 add/remove class 会导致重排重绘）；
• 不要使用 window.scrollY === 1 这类离散判断——滚动是连续的，应使用区间映射；
• perspective 必须设在可包含子元素的父容器上（非 body 或 html），否则 3D 效果失效；
• 如需更精细控制（如插槽遮罩），可用 clip-path 或绝对定位的 ::after 插槽盖板模拟。

? 总结：真正的“滚动驱动 3D 动画”本质是将滚动位置作为输入参数，实时计算并应用连续的 CSS 变换。它比多图帧切换更轻量、比 class 切换更精准，也更符合现代 Web 动画最佳实践。从今天起，让纸张真正“飞向用户”，而不是在 DOM 中来回切换名字。