纯css3无法实现真实感书本翻页动画，因其仅支持刚体变换，无法模拟纸张弯曲、厚度渐变或物理惯性；所谓“翻页”实为rotatey()驱动的平面旋转配合遮罩与层级切换。
纯 CSS3 实现真实感书本翻页动画不可行——它缺乏对页面弯曲形变、逐像素翻折阴影和物理惯性运动的控制能力；你看到的“翻页效果”几乎全是用 transform: rotateY() 模拟封面/内页旋转，配合遮罩与层级切换，本质是平面翻转，不是三维曲面建模。
为什么 transform: rotateY() 只能做“假翻页”
CSS3 的 3D 变换仅支持刚体变换（平移、旋转、缩放），无法描述纸张受力时的弧形弯折、厚度渐变或边缘卷曲。浏览器渲染引擎不提供贝塞尔曲面变形或顶点着色器接口，perspective 和 transform-style: preserve-3d 只能让多个平面元素在视点下产生透视错觉，但每一页仍是扁平矩形。
- 真实翻页中，页面中部先抬升、边缘滞后，CSS 无法驱动这种非线性形变
-
rotateY(90deg)到rotateY(180deg)是瞬时跳变，缺少中间过渡的弧度压缩（即“页角翘起”） - 阴影需手动用
box-shadow模拟，且无法随旋转角度动态调整模糊半径与偏移方向
可用的最小可行方案：双页 + 遮罩 + 关键帧
适用于静态翻页示意（如电子杂志封面切换），核心是用两个 div 分别代表左页和右页，通过 clip-path 或重叠 overflow: hidden 容器裁剪视觉区域，再用 @keyframes 控制 rotateY 和 z-index 切换。
.page-container {
perspective: 1200px;
width: 600px; height: 400px;
overflow: hidden;
}
.left-page, .right-page {
position: absolute;
width: 300px; height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.left-page {
left: 0;
transform: rotateY(0deg);
}
.right-page {
left: 300px;
transform: rotateY(0deg);
}
/* 翻页动画：右页向后翻 */
@keyframes flip-right {
0% { transform: rotateY(0deg); z-index: 2; }
50% { transform: rotateY(90deg); z-index: 1; }
100% { transform: rotateY(180deg); z-index: 0; }
}
- 必须设
backface-visibility: hidden，否则翻到背面会显示内容镜像 -
z-index动态切换是为了让“已翻页”不遮挡后续操作，但无法解决两页交界处的穿帮（需额外用伪元素画一条缝） - 移动端需加
-webkit-transform前缀，且 iOS Safari 对clip-path支持不稳定，建议用绝对定位遮罩层替代
真正接近真实的替代路径
若需要可拖拽、带触控惯性、页边弯曲的翻页，必须脱离纯 CSS：用 Canvas 手动绘制贝塞尔曲线模拟纸张形变，或集成轻量库如 turn.js（依赖 jQuery）或现代替代品 page-flip-js（原生 ES Module，支持触摸与 SVG 轮廓）。
-
page-flip-js内部用 requestAnimationFrame + 物理参数（stiffness、friction）计算每帧顶点位置，再映射到canvas或svg - 它暴露
flipNext()/flipPrev()方法，但初始化时仍需预加载所有页面 DOM 或图片，不能动态生成内容 - 若强行用 CSS 实现“翻页音效+粒子飞散”，得额外引入
Web Audio API和Canvas粒子系统——这已超出 CSS 范畴
真正卡住多数人的不是代码怎么写，而是误判了 CSS 的能力边界：它能做出“像翻页”的动画，但做不出“是翻页”的体验。纸张的柔软、阻力、光影变化，至今没有浏览器原生支持。动手前先想清楚——你要的是演示用的视觉点缀，还是用户愿意停留三秒的真实交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
