折纸动画的核心是transform与perspective配合，需在最近共同父级设perspective并启用preserve-3d，用.front和.back双元素模拟翻页，配合cubic-bezier缓动及backface-visibility优化渲染。
折纸动画的核心是 transform 与 perspective 的配合
CSS 折纸效果本质是三维空间中的旋转，不是靠 rotateX() 单独撑起来的。必须给父容器设置 perspective（通常 800px–1200px），否则 rotateX(90deg) 看起来像平面缩放。子元素还要加 transform-style: preserve-3d，不然子元素的 3D 变换会被扁平化。
-
perspective必须设在“能包裹所有翻转面”的最近共同父级上，不是 body 或最外层容器 - 折叠时用
rotateX(90deg)，展开用rotateX(0)；但注意：默认旋转原点在顶部中点，所以得配transform-origin: top center - 不要对
display: none元素做过渡——它不触发重绘，改用visibility: hidden+opacity: 0或直接控制height和overflow
用单个元素模拟“两页折纸”需要伪元素或额外 DOM
纯 CSS 折纸动画没法让一个 div 自己撕成两半再翻。常见做法是：
- 用一个容器包两个子元素：
.front和.back，分别代表折纸的正面和背面 -
.front初始transform: rotateX(0)，.back初始transform: rotateX(-90deg)（背面向上藏起） - 折叠时两者同步动：
.front转到90deg，.back转到0deg，视觉上就像纸张翻过去 - 如果只用一个元素+
::before/::after，要注意伪元素无法响应点击、且不能设transform-style: preserve-3d，限制较大
transition 触发时机和缓动曲线影响真实感
折纸不是匀速转动，物理上加速度明显。用 transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 比 ease-in-out 更接近纸张惯性。
- 不要只写
transition: all，它会把无关属性（如 color）也加入过渡，拖慢性能 - 动画开始前确保元素已渲染完成，避免首次点击无反应：可加
will-change: transform（仅在动画频繁时启用，别滥用） - 在 Safari 上，
transform: rotateX()偶尔跳帧，加backface-visibility: hidden给翻转面能稳定渲染
移动端触摸触发折叠需绕过 click 延迟与误触
纯 CSS 无法监听 touch，必须结合 JS 控制 class 切换。但要注意：
- 不要用
click监听，移动端有 300ms 延迟；改用touchstart或pointerdown - 防止手指滑动时误触发：加
{ passive: true }，并在touchmove中判断位移是否超阈值（如 > 10px）就取消折叠 - iOS Safari 对
transform-style: preserve-3d支持不稳定，真机测试务必覆盖 iPhone 12–15 系列
折纸动画的难点不在旋转本身，而在于视角一致性、层叠顺序（z-index 在 3D 中失效，得靠 translateZ() 调整前后关系），以及 Safari 下 perspective 与 transform 的组合渲染行为——这些细节不试到真机，很难靠文档预判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
