基于纯 JavaScript 实现的图书翻页效果，它带有下一页和上一页按钮，可通过翻页动画切换图片，使用起来也很简单，只需要在前后容器中添加图片（作为背景），代码就会自动渲染出逼真的图书翻页风格切换效果。
使用方法：
首先，创建一个类名为 "right "的 div 元素，然后放置两个类名分别为 "back "和 "front "的 figure 图元素（index.html）。 将背景图片 URL 放在 back 和 front 容器的样式属性中。 对下一张幻灯片重复同样的方法。 您可以根据需要添加多个页面。
<div class="right">
<figure class="back" id="back-cover"></figure>
<figure class="front" style="background-image: url('页背景图片地址');"></figure>
</div>然后，在项目中为翻页幻灯片添加 CSS 样式（style.css），类似下面：
.book-section{
height: 100vh;
width: 100%;
padding: 40px 0;
text-align: center;
}
.book-section > .container{
height: 400px;
width: 500px;
position: relative;
left: 50%;
transform: translateX(-50%);
border-radius: 2%;
margin-bottom: 30px;
perspective: 1200px;
}
.container > .right{
position: absolute;
height: 100%;
width: 50%;
transition: 0.7s ease-in-out;
transform-style: preserve-3d;
}
.book-section > .container > .right{
right:0;
transform-origin: left;
border-radius: 10px 0 0 10px;
}
...最后，添加类似以下 JavaScript 代码（script.js），激活翻页图书图片翻页。
var right = document.getElementsByClassName("right");
var si = right.length;
var z=1;
turnRight();
...
