transform-style: preserve-3d 是翻页动画的必要前提，否则子元素被拍平至2d平面导致 rotatey() 失效；需设于直接包裹内容的容器，配合 backface-visibility: visible 和正确 transform-origin 才能实现真实3d翻页效果。
为什么 transform-style: preserve-3d 是翻页动画的必要前提
不加这句，所有子元素都会被“拍平”到父容器的 2D 平面，rotateY() 看起来像在原地缩放或错位，根本不是翻转。浏览器默认是 transform-style: flat，相当于主动关闭了 3D 上下文。
实操建议：
- 必须设在直接包裹翻页内容的容器上（比如
.book-page或.page-wrapper），而不是最外层body或.book - 该容器不能有
overflow: hidden，否则旋转后超出的部分会被裁掉——翻页时背面内容常会短暂探出边界 - 如果父级用了
perspective，注意它和transform-style是配合关系：前者定义观察距离，后者决定是否启用 3D 渲染管线
rotateY(180deg) 翻页时背面内容看不见？检查这几个地方
常见现象是翻到一半，背面突然消失、变黑，或只显示一半。这不是动画没写完，而是 3D 空间里的“面朝向”问题。
关键点：
- 背面默认不可见（
backface-visibility: hidden是默认值），需显式设为visible才能看见翻转后的背面 - 背面元素（如
.page-back）必须有明确的transform: rotateY(180deg)初始化，否则它会以正面姿态被“甩”过去，视觉错乱 - 不要只给正面加
rotateY，而让背面静止——它们必须共用同一套 3D 坐标系，且初始rotateY值互为 0 和 180
用 transform: rotateY() 做平滑翻页，这些参数影响手感
单纯写 rotateY(180deg) 只能完成单次翻转，真实书页需要缓动、分阶段、甚至模拟纸张弹性。核心不在角度本身，而在如何驱动它。
实操建议：
- 动画时间建议 400–600ms，太短像抽搐，太长像卡顿；用
ease-out比ease-in-out更接近真实纸张减速感 - 别直接对
.page-front和.page-back分别做rotateY动画——应统一控制它们的父容器，靠父子层级 +preserve-3d自动联动 - 想实现“掀角”效果？得用
transform-origin控制旋转轴心，默认是居中（50% 50%），翻右页就设成right center，左页则用left center
移动端翻页卡顿或失真？先关掉这几个隐形开关
iOS Safari 和部分安卓 WebView 对 3D transform 的硬件加速策略很敏感，不是写了 preserve-3d 就一定流畅。
容易被忽略的兼容点：
-
will-change: transform要加在翻页容器上，但别滥用——只在用户触发翻页前动态添加，翻完立刻移除，否则长期占用 GPU 内存 - 避免在翻页元素上同时使用
filter（如blur()）或opacity动画，它们会强制降级到软件渲染，3D 效果直接崩 - 某些安卓机型不支持
transform-style: preserve-3d在position: fixed元素上生效——把翻页容器改成position: absolute或脱离文档流更稳妥
翻页动画真正难的不是怎么转，而是怎么让正反两面在空间里始终“粘连”又各自独立；一旦 transform-style 设错位置，或 backface-visibility 忘设，整个 3D 关系就断了，再调 rotateY 参数也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
