纯css翻书效果核心是两张图绕y轴3d旋转切换，需父容器设perspective（800–1200px）、子容器设transform-style:preserve-3d及backface-visibility:hidden，并用关键帧+贝塞尔曲线控制翻转弧度与景深。
用 transform + perspective 模拟书页翻转的3D空间感
纯 CSS 实现翻书效果，核心不是“翻”，而是让两张图在 3D 空间里绕 Y 轴旋转并遮挡切换。必须启用 3D 渲染上下文，否则 rotateY 会退化为平面旋转，失去翻页的纵深感。
关键点：
-
perspective要加在容器父级（如.flipbook），不能只加在翻转元素上；值太小（如200px）会让翻转夸张失真，太大（如2000px）则几乎看不出翻页弧度，建议800px–1200px -
transform-style: preserve-3d必须设在直接包裹两页的容器上（即.page-wrapper），否则子元素的 3D 变换会被扁平化 - 前后页需用
backface-visibility: hidden，否则翻转到背面时会看到镜像内容
响应式翻页动画如何适配不同屏幕宽度
翻书效果在移动端容易因容器尺寸缩放导致透视变形或翻转错位，不能只靠 width: 100%。需要结合视口单位与媒体查询做分层控制。
实操建议：
- 主容器宽高用
vw/vh（如width: 90vw; height: 70vh），避免被父容器 padding 挤压 - 在
@media (max-width: 768px)下重置perspective为600px，同时减小transform-origin的 X 偏移（比如从100%改为95%），防止小屏下“书脊”偏出可视区 - 禁用
scale类动画（如缩放入场），它会干扰 3D 翻转的坐标系，改用opacity+translateZ控制景深
用 @keyframes 定义翻页动画时的关键帧陷阱
直接写 from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } 看似合理，但实际会出现“页面穿模”或“翻半截卡住”——因为浏览器对 3D 旋转的插值逻辑不保证单向连续性。
正确做法是显式定义中间状态：
- 起始帧：
transform: rotateY(0deg) translateZ(0) - 中点帧（
50%）：transform: rotateY(-90deg) translateZ(100px)（模拟书页弯折凸起） - 结束帧：
transform: rotateY(-180deg) translateZ(0) - 必须配合
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)，硬生生把缓动曲线拉成“先快后慢再微调”，否则翻页末尾会生硬弹回
触控翻页时 click 和 touchstart 的兼容处理
桌面端靠 hover 或 click 触发，移动端却常因 click 300ms 延迟导致翻页滞后，且 touchstart 在部分安卓机型上无法触发伪类动画。
稳妥方案是用 JavaScript 绑定事件，但只用于切换 class：
- HTML 中给翻页容器加
data-state="idle" - JS 里监听
touchstart或click，改为设置dataset.state = "flipping" - CSS 动画全由
[data-state="flipping"] .page.current这类属性选择器驱动，不依赖伪类 - 动画结束后用
animationend事件回调清理 class 或更新数据源，否则连续点击会堆叠动画
真正难的不是写出翻页动画，而是让每一页翻过去之后，下一页的内容、尺寸、甚至图片加载时机都严丝合缝地接上——尤其是当图片来自懒加载或异步接口时，opacity 和 visibility 的切换节奏稍有偏差，整个翻书感就碎了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
