在没有canvas元素的HTML中剪切DIV
我正在研究 HTML+Javascript 页面翻转效果。 我希望在没有 HTML5 Canvas 元素的情况下完成此任务，以便我可以将其与文本/表单等
一起使用。这就是我到目前为止所编写的内容（webkit 浏览器，我使用 chrome 12）： JSFIDDLE：翻页
预览：
我想要做的不是显示蓝色矩形之外的红色矩形区域。 我的问题在于重叠区域（紫色区域）的屏蔽/剪切。 我尝试将页面（红色）div 嵌入到掩码（蓝色）div 中并设置 overflow : hide 但问题是，每当掩模（蓝色）旋转时，页面（红色）也会旋转，并且计算无法通过偏移进行校正。
还有其他方法可以剪辑该区域吗？
I'm working on an HTML+Javascript Page flip effect.
I want this to accomplish this without the HTML5 Canvas element so that I can use this with text/forms etc.
This is what I have hacked together so far(webkit browsers,im using chrome 12):
JSFIDDLE: Page Flip
Preview:
What I want to do is not show the regions of the red rectangle outside of the blue rectangle.
My problem Lies in the MASKING / CLIPPING of the overlapping region (the purple area).
I tried to embed the page (red) div within the mask (blue) div and set overflow : hidden
but the problem was whenever the mask (blue) rotated, the page (red) rotated as well and the calculations were leading nowhere to correct with an offset.
Are there any other ways I can clip this region?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您必须计算并实现内部 div 的反向旋转，以抵消外部/屏蔽 div 的旋转。这是我们的 Sencha Animator 演示中的示例：
我相信您已经看过 Roman Cortes 的原始 CSS pageflip - 我们为演示复制了该方法，该演示对两个 div 使用共同的固定旋转点。
You have to calculate and implement counter rotation for the inner div to offset the rotation of the outer/masking div. Here's an example from our Sencha Animator demos:
I'm sure you've seen Roman Cortes's original CSS pageflip - whose method we copied for the demo who uses a common fixed rotation point for both divs.
如果我正确理解了这个问题，您希望将（蓝色）div 放在（红色）div 之上吗？如果正确，则为两者添加
z-index属性，并使（蓝色）div 的z-index高于（红色）div 的 z-index 。更新：可能值得研究一下 CSS
clip属性，因为您的（红色）div 已经绝对定位。我相信，唯一的问题是你的（红色）div 需要位于（蓝色）div 的内部。If I understand the question properly, you want to have the (blue) div above the (red) div? If that's correct then add a
z-indexproperty to both and have the (blue) divz-indexhigher than that of the (red) div.Update: It may be worth looking into the CSS
clipproperty because your (red) div is already positioned absolutely. The only problem then would be that your (red) div, I believe, would need to be inside of the (blue) div.