如何将翻页动画添加到给定的HTML内容中

我正在尝试以书籍布局呈现给定的HTML文件,其中包含两列和翻页动画。 到目前为止,我实现的方式是水平滚动2列,然后按屏幕宽度滚动翻页,看起来是这样的-

我想在翻页时添加翻页动画,我已经探索了一些库,比如 StPageFlip , turnjs ,但所有这些都要求以类似页面的方式显式定义内容,如果内容找不到页面,则会被截断-

<div id="magazine">
    <div><span class="text">Page 1</span></div>
    <div><span class="text">Page 2</span></div>
    <div><span class="text">Page 3</span></div>
</div>

要使用它们,我必须将内容划分为更小的div,确保div的内容适合屏幕大小,等等,这感觉像是大量的开销处理。和 如何划分内容,使其始终适合屏幕?

有没有任何库可以将现有的html内容转换为图书风格,而不必明确定义页面? 或者,我如何自己实现翻页动画的基本版本,我应该如何处理它?任何建议都会有所帮助。

我能以某种方式在当前滚动代码中添加一些动画吗?我必须让它看起来有点像翻页?

$(div).animate({
    scrollLeft: scrollLeftValue
},
{
    duration: 300
});