根本原因是transform-origin未设对位置：左页需设为0 0，右页为100% 0，配合rotateY()和perspective才能模拟绕书脊翻页；还需backface-visibility:hidden、z-index动态控制及::before渐变遮罩增强厚度与阴影。
为什么翻页动画总像硬纸板在转，而不是书页在翻？
根本原因是 transform-origin 没设对位置——它决定了旋转的“支点”。书页翻动时，左侧页面绕左边缘转，右侧页面绕右边缘转，但默认的 transform-origin: 50% 50% 把轴心钉在元素正中心，一转就飘，没厚度感。
真实翻页需要两个独立轴心：左页用 transform-origin: 0 0（左上角），右页用 transform-origin: 100% 0（右上角）。这样配合 rotateY() 才能模拟纸张绕书脊折叠的物理效果。
- 别用百分比混搭像素值，比如
transform-origin: 0 0px—— 浏览器会忽略整个声明 - 确保父容器有
perspective（建议 1200px～2000px），否则rotateY看不出纵深 - 左页和右页必须是兄弟元素，且
position: absolute叠放，否则旋转时会触发重排，卡顿明显
怎样让翻页有“纸张厚度”和阴影过渡？
纯 rotateY 只是平面旋转，要立体感得靠三件事：层叠顺序、背面可见性、伪元素投影。
关键配置：
- 给每页加
backface-visibility: hidden，防止翻到背面时内容镜像显示 - 左页翻出时，z-index 要高于右页；右页翻入时，z-index 要低于左页——用 CSS 自定义属性动态控制更稳妥
- 用
::before在翻页边缘加渐变遮罩：background: linear-gradient(90deg, rgba(0,0,0,0.3), transparent)，方向随翻页方向切换
示例片段（左页翻出）：
.page-left {
transform-origin: 0 0;
transform: rotateY(-45deg);
z-index: 2;
}
.page-left::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 20px;
background: linear-gradient(90deg, rgba(0,0,0,0.3), transparent);
}
移动端触摸翻页时，transform-origin 值被重置怎么办？
常见现象：PC 上正常，手机上翻页突然“跳轴”——本质是 Safari/Chrome for iOS 对 transform-origin 的解析存在兼容性陷阱：当元素宽高为 0 或未触发 layout 时，百分比原点会 fallback 到 50% 50%。
解决方式很直接：
- 确保翻页容器有明确宽高（不能靠内容撑开），例如
width: 300px; height: 400px - 避免在
display: none元素上提前设置transform-origin，等display: block后再应用 - 用
will-change: transform提前告知浏览器该元素将变换，可稳定 origin 解析
特别注意：iOS 16+ 中，如果父容器用了 contain: layout paint，会截断 transform-origin 的继承链，必须显式在子页上重复声明。
翻页动画卡顿或闪烁，是不是 transform-origin 写错了？
不是写错，而是触发了非合成层。当 transform-origin 配合 rotateY 但元素没有独立合成层时，浏览器会频繁重绘整个页面，尤其在中低端安卓机上明显掉帧。
必须加的优化项：
- 给翻页元素加
transform: translateZ(0)或will-change: transform强制 GPU 加速 - 禁用
transform-origin动画本身（不要对它做 transition），只对transform做transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) - 避免在翻页过程中动态修改
transform-origin值——它不是为动画设计的属性，改一次就触发一次 layout
真正影响性能的是 origin 值是否导致 layout 触发，而不是 origin 本身数值多复杂。一个写死的 0 0 比用 JS 计算出来的 calc(0px + 0%) 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
