纯CSS可实现静态书本翻页动画，核心是transform: rotateY()配合精准的transform-origin（左页left center、右页right center），必须设backface-visibility: hidden和preserve-3d，多页需JS控制状态。
纯 CSS 实现书本翻页效果是可行的，但必须明确：它只能模拟「单次静态翻页」或「左右页切换动画」，无法做到真实电子书那种连续多页、带物理惯性、可拖拽翻页的交互。真要接近原生翻页体验，transform: rotateY() + transform-origin 是核心，其他全是围绕它补细节。
为什么 transform-origin 必须设对位置
翻页动画失真、页面“飘”在空中、翻转轴偏移——90% 都是因为这个值没配准。左页翻动时，旋转轴必须在最左侧边缘；右页翻动时，必须在最右侧边缘。否则会像纸被捏着中间往上掀。
-
.left-page要加transform-origin: left center;（不是left top，垂直方向必须居中） -
.right-page要加transform-origin: right center; - 如果容器用了
perspective，但子元素没设transform-style: preserve-3d;，翻转会塌成 2D，失去厚度感 - 移动端 Safari 对
transform-origin的百分比支持不稳定，建议用px或left/right关键字
backface-visibility: hidden 不是可选项
不加这句，翻到背面时会看到内容镜像（尤其文字），或者两页同时显示造成视觉混乱。这是翻页类动画最容易被忽略的「保底设置」。
- 必须给每个
.page元素单独加backface-visibility: hidden; - 它和
transform-style: preserve-3d;是配套存在的，缺一不可 - 部分旧版 Android WebView 会忽略该属性，需配合
opacity: 0.99强制触发硬件加速来兜底
按钮控制翻页时，DOM 结构决定逻辑复杂度
用两个独立 .page 切换（如 .page1 / .page2）最简单；但要做「多页书」，直接靠 CSS 动画硬切就撑不住了——状态管理、页码同步、过渡中断都会出问题。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 双页结构（仅两页）：用
rotateY(0deg)↔rotateY(180deg)+z-index控制层级即可 - 三页及以上：建议用 JS 控制 class 切换（如
is-flipping、is-left-active），CSS 只负责定义动画帧 - 点击「下一页」时若上一页动画还没结束，
transition会被打断，导致跳变。可用getComputedStyle(el).transform检查当前状态再触发新动画 - 别用
display: none隐藏非当前页——它会破坏 transform 连续性，改用visibility: hidden或opacity: 0
阴影和立体感不是靠 box-shadow 堆出来的
真实书本翻页时，阴影随角度动态变化，而纯 CSS 的 box-shadow 是静态的。强行用多个伪元素模拟边角阴影，反而增加渲染负担且难维护。
- 优先用
perspective+rotateX/rotateY让浏览器自己生成光照投影 - 封面/书脊可用
::before/::after做固定阴影，但只用于静止态；翻页过程中应隐藏它们 - 性能敏感场景（比如低端安卓机），关掉
filter: drop-shadow()，它比box-shadow更吃 GPU - 测试时打开 Chrome DevTools 的「Rendering」面板，勾选「Paint flashing」，看翻页过程是否频繁重绘
真正难的不是让一页转起来，而是让翻页动作和内容更新在视觉节奏上对齐——比如翻到 70% 角度时，下一页内容才开始淡入，这种微调没法靠一套通用 class 解决，得逐页测。
