如何让Readium阅读器中CSS 3D翻页模拟纸张弯曲而非硬卡片翻转

当前实现方案 #

• 捕获当前页面视图
• 将视图渲染到过渡层（生成快照）
• 借助CSS 3D transforms为过渡层添加动画
• 通过rotateY(...)结合元素正面/背面模拟翻页

效果局限：功能可用，但视觉上是3D旋转的硬卡片质感，无法呈现柔性纸张的弯曲效果。

期望效果 #

• 翻页过程中呈现明显的纸张弯曲弧度
• 更自然的页面背面视觉效果
• 支持双页展开模式

核心问题：单个带rotateY的DOM元素是平面结构，无法表现纸张弯曲的形态。

已尝试的优化方法 #

• 使用配置transform: rotateY(...)和transform-style: preserve-3d的单个过渡层
• 调整perspective、transform-origin、动画缓动曲线及时长参数
• 添加渐变叠加层模拟页边高光与折叠阴影
• 通过嵌套容器实现翻页时页面的轻微扭曲/缩放

尝试后仍未解决：效果依旧偏向硬卡片翻转，达不到柔性纸张的弯曲质感。

问题咨询 #

在电子书阅读器这类场景中，实现逼真纸张弯曲翻页效果通常采用哪些渲染/动画方案？比如是否推荐：

• 将页面分割为多个垂直条带并分别施加变换？
• 把过渡层迁移到canvas/WebGL（如Three.js）实现？
• 其他能实现弯曲效果的技术？

如果有阅读器或类似UI效果的开发经验，恳请提供相关指导、示例代码结构或实现思路建议。

内容的提问来源于stack exchange，提问作者Vivek