在HTML中剪裁DIV而沒有畫布元素

Question

我正在處理HTML + Javascript頁面翻頁效果。 我想這個做到這一點，而不HTML5 Canvas元素，這樣我可以使用這個文本/表格等

這是我砍死在一起到目前爲止（WebKit瀏覽器，使用Chrome 12 IM）： JSFIDDLE: Page Flip

前瞻：

我想要做的是不顯示藍色矩形之外的紅色長方形的區域是什麼。 我的問題在於重疊區域（紫色區域）的遮罩/剪切。 我試圖在掩碼（藍色）div內嵌入頁面​​（紅色）div並設置爲overflow : hidden 但問題在於無論何時掩碼（藍色）旋轉，頁面（紅色）都旋轉並且計算結果無處可糾與抵消。

我還有其他方法可以剪輯這個區域嗎？

Answer 1

如果我正確理解這個問題，你想要在（紅色）div上面有（藍色）div？如果這是正確的，那麼將z-index屬性添加到兩者，並使（藍色）div z-index高於（紅色）div。

更新：這可能是值得研究CSS clip屬性，因爲你的（紅色）div已經絕對定位。唯一的問題就是你的（紅色）div，我相信，需要在（藍色）div內。

Answer 2

您必須計算和實現內部div的反轉，以抵消外部/遮蔽div的旋轉。這裏的an example from our Sencha Animator demos：

我確定你已經看過Roman Cortes的原始CSS pageflip - 我們爲演示覆制了他們的方法，它爲兩個div使用了一個公共的固定旋轉點。