由图可见，在第二页背面展现出来的仍然是第一页背面，请问该如何解决？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3翻书效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body,html {
height: 100%;
}
li{
list-style: none;
}
body {
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;
background-color: #212121;
}
.book {
position: absolute;
top: 30%;
left: 40%;
width: 500px;
height: 500px;
background-color: #fff;
-webkit-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
}
/*开3D效果*/
.pre-3d {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #1976D2;
text-align: center;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.front1 {
background-color: paleturquoise;
}
.front2 {
background-color: goldenrod;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="book pre-3d" id="book">
<!-- 后封面 -->
<ul>
<li class="" id="Rcover">后封面<img src="img/22.jpg" alt=""></li>
<!-- 书页 -->
<!-- <li class="pre-3d page front2"> -->
<!-- <div>
我们的故事从哪里开始说起好呢？我想不起我们是怎么认识的了。
你是个不会主动的人，而我恰好也是，你说想要一个人的座位，我说我也是！
<img src="img/33.jpg" alt="">
</div>
-->
第二页
<!-- </li> -->
<li class="pre-3d page front2">
第二页
<img src="img/33.jpg" alt="">
</li>
<li class="pre-3d page front2">
第一页
<img src="img/22.jpg" alt="">
</li>
<!-- <li class="pre-3d page front2">ddfdf<img src="img/4.jpg" alt=""></li>
<li class="pre-3d page front2">sddd<img src="img/2.jpg" alt=""></li> -->
<!-- 书的封面 -->
<!-- <li class="pre-3d page front1">封面<img src="img/44.jpg" alt=""></li> 有问题 -->
</ul>
</div>
</body>
<script>
var b=document.getElementById('book');
var s=document.getElementsByTagName('li');
var c=document.getElementById('Rcover');
var i=2;
b.onclick=function(){
if(i>0){
s[i].style.transform='rotateY(-150deg)';
s[i].style.transition='3s';
i--;
}
}
c.onclick = function (e) {
//阻止事件穿透
e.stopPropagation();
// j比i大1
//这里循环不写死6，并且从0开始循环，不是1
//之前就是这里报错了，下标越界
for (var j = 0; j < s.length; j++) {
s[j].style.transform = 'rotateY(0deg)';
s[j].style.transition = '3s';
}
i = 2;
console.log("i:", i)
}
</script>
</html>
