纯css可实现刚性翻书效果，但无法模拟折角弯曲；核心是rotatey配合transform-origin设为边缘（右页100% 50%、左页0 50%），必须启用preserve-3d、perspective和backface-visibility: hidden。
纯 CSS 实现“翻书”效果可行，但“折角翻页”（即单页局部弯曲、纸张物理变形）无法仅靠 CSS 完成——transform 只能刚性旋转/位移，不能模拟曲面。下面分两块说清楚怎么做、为什么这么选、以及哪些地方一动就崩。
用 rotateY + transform-origin 做真实感翻书动画
核心不是加 rotateY，而是让旋转轴落在书页边缘。向右翻页时，页面必须绕右侧中点顺时针转出，否则就是“飘在空中甩纸片”。
-
transform-origin: 100% 50%必须写在触发翻转的页元素上（比如.page.active），不能只设在父容器 - 右页初始状态应为
rotateY(0deg)，翻出目标是rotateY(-180deg)；左页则用transform-origin: 0 50%+rotateY(180deg) - 必须配
backface-visibility: hidden，否则翻到一半背面会透出或闪烁（尤其 Safari） - 动画时间控制在
400ms–600ms，缓动用cubic-bezier(0.645, 0.045, 0.355, 1)比ease-out更接近纸张减速惯性
为什么 transform-style: preserve-3d 是硬性前提
不加这句，所有子元素会被浏览器强制拍平到 2D 平面，rotateY() 就退化成缩放+错位，根本不是翻转。它不是“锦上添花”，而是 3D 空间存在的开关。
- 必须设在直接包裹翻页内容的容器上（如
.book-page），而不是最外层.book或body - 该容器不能有
overflow: hidden，否则翻转过程中探出边界的背面内容会被裁掉 - 搭配
perspective使用：前者定义观察距离（建议800px–1200px），后者启用 3D 渲染管线，二者缺一不可
折角翻页？CSS 做不了，别硬扛
所谓“掀一角”“纸张弯曲”，本质是网格顶点随鼠标位置实时形变，需要逐像素计算纹理映射和阴影渐变。CSS 的 transform 是刚体变换，没有曲率参数，clip-path 或 mask 只能切形状，无法生成透视弯曲感。
- 真要实现，得用 Canvas（如
StPageFlip）或 WebGL（Three.js），它们能操作顶点坐标与 fragment shader - 网上所谓“CSS 折角”基本是障眼法：用多个小 div 拼接 + 分段
rotateY+ 阴影叠加，放大看就是锯齿，且响应式下极易错位 - 如果只是想要“点击后页面像被手捏住一角掀开”的交互暗示，可用
transform-origin微调 +scale+box-shadow模拟，但得接受它只是示意，不是物理模拟
移动端卡顿、Safari 闪屏的隐形开关
写了 preserve-3d 不等于自动 GPU 加速。iOS Safari 和部分安卓 WebView 对 3D 合成极其敏感，几个配置漏掉就会掉帧或白屏。
-
will-change: transform要动态加：翻页前 JS 注入，翻完立刻移除，长期挂着会吃光 GPU 内存 - 禁用非整数透明度：
opacity: 0.99这类值会让 Safari 强制降级到 CPU 渲染，直接卡死 - 横屏 iPad 上
transform-origin: 100% 50%可能因 subpixel 渲染漂移，改用calc(100% - 1px)微调更稳 - 测试时务必关掉 Safari 的“自动图形切换”，并在开发者工具里勾选 “Disable accelerated 2D canvas” 排查是否是合成策略冲突
真正难的从来不是写出 rotateY(-180deg)，而是三页 DOM 层级怎么配、背面内容何时显隐、perspective 和 transform-origin 怎么协同、以及什么时候该果断放弃 CSS 去接 Canvas —— 这些边界，比代码本身更决定最终效果是否“像本书”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
