在没有canvas元素的HTML中剪切DIV

Question

我正在处理HTML + Javascript页面翻转效果。 我希望在没有HTML5 Canvas元素的情况下完成此操作，以便我可以将其与文本/表单等一起使用。

到目前为止，这是我一直在攻击的内容（webkit浏览器，我使用chrome 12）： JSFIDDLE: Page Flip

预览：

我想要做的不是在蓝色矩形之外显示红色矩形的区域。 我的问题在于重叠区域（紫色区域）的掩蔽/剪切。 我试图在掩码（蓝色）div中嵌入页面（红色）div并设置overflow : hidden 但问题是每当面罩（蓝色）旋转，页面（红色）也会旋转，并且计算无处可以通过偏移进行校正。

我还有其他方法可以剪辑这个区域吗？

Answer 1

您必须计算并实现内部div的反向旋转，以抵消外部/屏蔽div的旋转。这是an example from our Sencha Animator demos：

我确定你已经看过Roman Cortes的原始CSS pageflip - 我们为演示复制的方法为两个div使用了一个共同的固定旋转点。

Answer 2

如果我理解了这个问题，你想要（红色）div上方的（蓝色）div？如果这是正确的，那么向两者添加z-index属性，并使（蓝色）div z-index高于（红色）div。

更新：可能值得查看CSS clip属性，因为您的（红色）div已经绝对定位。那么唯一的问题就是你的（红色）div，我相信，需要在（蓝色）div中。