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

Posted 2023-03-23

【中文标题】在没有画布元素的 HTML 中剪辑 DIV

【英文标题】：clipping a DIV in HTML without canvas element

【发布时间】：2011-10-14 10:29:33

【问题描述】：

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

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

预览：

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

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

【参考方案1】：

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

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

【讨论】：

这对于固定路径翻页非常有用。不过，我不确定如何让它们以一个共同点旋转。

啊，我明白了。这很重要......让我来面条

【参考方案2】：

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

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

【讨论】：

不，我不想在蓝色之外显示红色部分