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

Question

我想实现类似的东西（翻页），想知道turn.js 是如何创建它的效果的。它使用 css 转换：平移和旋转来创建效果。我在检查员检查有两个带旋转的包装器（如 answer 中所指出的那样），但旋转是

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

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

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

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

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

这里是jsfiddle。

Answer 1

我发现下面的页面旋转是在不同的div中，当前页面正负旋转只是为了裁剪当前页面。