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

Question

我想實現類似的功能（頁面翻轉），並且想知道turn.js如何創建它的效果。 它使用CSS轉換：平移和旋轉來創建效果。 我在檢查器中檢查是否有兩個旋轉包裝器（如此答案所示 ），但是旋轉

外包裝的正數，如rotation(30deg)和

內包裝紙以相同的角度rotation(-30deg)負旋轉（如果拖動左下角）。

我嘗試在測試頁中使用相同的東西（僅旋轉），但唯一可行的方法是移開角落，並且在演示中它不旋轉頁面（我使用圖像）時，角度為45時倒置，這是為什么不工作嗎 如果我設置

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

在圖片上是正確的，但是為什么turn.js不對頁面的原始元素進行任何轉換？

這是jsfiddle 。

Answer 1

我發現旋轉下面的頁面位於不同的div中，帶正負旋轉的當前頁面僅用於剪切當前頁面。