html - 在没有画布元素的 HTML 中剪辑 DIV

Question

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

到目前为止，这是我一起破解的（webkit 浏览器，我使用 chrome 12）： JSFIDDLE: Page Flip

预习：

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

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

Answer 1

您必须计算并实现内部 div 的反向旋转以抵消外部/遮蔽 div 的旋转。这是我们的 Sencha Animator 演示中的一个示例：

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

Answer 2

如果我正确理解了这个问题，你想让（蓝色）div 高于（红色）div 吗？如果这是正确的，则z-index向两者添加一个属性，并使（蓝色）divz-index高于（红色）div。

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