翻页效果如何在turn.js中工作

Question

我想实现类似的功能（页面翻转），并且想知道turn.js如何创建它的效果。 它使用CSS转换：平移和旋转来创建效果。 我在检查器中检查是否有两个旋转包装器（如此答案所示 ），但是旋转

外包装的正数，如rotation(30deg)和

内包装纸以相同的角度rotation(-30deg)负旋转（如果拖动左下角）。

我尝试在测试页中使用相同的东西（仅旋转），但唯一可行的方法是移开角落，并且在演示中它不旋转页面（我使用图像）时，角度为45时倒置，这是为什么不工作吗 如果我设置

    -webkit-transform: rotate(180deg) translate(102px, -326px);

在图片上是正确的，但是为什么turn.js不对页面的原始元素进行任何转换？

这是jsfiddle 。

Answer 1

我发现旋转下面的页面位于不同的div中，带正负旋转的当前页面仅用于剪切当前页面。