在沒有畫布元素的情況下剪切HTML中的DIV

Question

我正在研究HTML + Javascript頁面翻轉效果。 我希望它在沒有HTML5 Canvas元素的情況下完成此任務，以便可以在文本/表單等中使用。

到目前為止，這是我共同研究的內容（Webkit瀏覽器，使用chrome 12即時通訊）： JSFIDDLE：頁面翻轉

預習：

我要做的是不顯示藍色矩形之外的紅色矩形區域。 我的問題在於重疊區域（紫色區域）的掩膜/裁切。 我試圖將頁面（紅色）div嵌入到遮罩（藍色）div中並設置overflow : hidden但問題是每當蒙版（藍色）旋轉，頁面（紅色）也旋轉並且計算無處可糾正時偏移。

我還有其他方法可以裁剪該區域嗎？

Answer 1

您必須計算並實現內部div的反向旋轉，以抵消外部/蒙版div的旋轉。 這是我們的Sencha Animator演示示例 ：

我確定您已經看過Roman Cortes的原始CSS pageflip-我們為演示復制的方法，該演示為兩個div使用相同的固定旋轉點。

Answer 2

如果我對問題的理解正確，您想讓（藍色）div高於（紅色）div嗎？ 如果正確，則向兩者都添加z-index屬性，並使（藍色）div的z-index高於（紅色）div的z-index 。

更新：可能值得研究CSS clip屬性，因為您的（紅色）div已完全定位。 唯一的問題就是我的（紅色）div必須位於（藍色）div內。