Javascript 翻页书效果表现得很奇怪，书页互相掉落

我想创建一个书本效果，根据用户选择的选项，书本将以3d效果翻转到正确的页面。但由于我对CSS3中的3d/transforms等不太熟悉，我遇到了一些问题

现在，我有一段翻页的代码：

$(document).on('click','.button', function() {
    $('#configurationPreviewContainer ul:nth-of-type('+$(this).attr('data-target')+')').css('transform', 'rotateY(-180deg) perspective(3000px)');
});

但是可以看到整个html/css/JS@codepen>

在扩展版本中，用户不必单独单击每个页面，但是对于这个快速/干净的演示，我就是这样做的

现在有三个问题

1） 单击“第1页”链接时，书的正面/封面将翻转。但是当页面着陆时，封面仍然会显示出来？它应该显示在书的封面后面

2） 90%旋转不在书的中心，但在书的左边。为什么会这样，我该如何解决

---

3） 当您首先选择“第1页”，然后选择“第2页”时，第二页将穿过第一页，使其不可见。

我肯定不是说这是重复的，而是看一下此线程中的演示（有问题的演示和有答案的演示）我觉得你正在看其中的一个。谢谢你的链接，哈利！我在stack上搜索过类似的问题，但没有找到那个链接。这基本上就是我想要做的，它提供了对所用代码的良好洞察。这肯定会帮助我解决问题1和3。但似乎在你的链接中，他们也有同样的“问题”，正如我在第2期中所描述的那样，知道这有帮助。关于问题2，我有点不知所措，因为我看不到与中心的任何偏移。我希望您不是指透视设置。我修改了您的示例，以查看在切换页面时它是否正常工作。在我的最终版本中，书的正面颜色将与内页不同，因此它必须正确工作，现在像现在一样显示奇怪的动画效果：-知道为什么吗？您可以单击左上角的“按钮”启动页面切换IDN't get your mate。无论如何，我在链接的线程中做了第3-5点提到的更改，我没有发现任何错误-。你能指出确切的问题吗？