gpt4 book ai didi

html - 在没有 Canvas 元素的情况下在 HTML 中裁剪 DIV

转载 作者:太空宇宙 更新时间:2023-11-04 16:19:34 25 4
gpt4 key购买 nike

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

这是我到目前为止一起破解的内容(webkit 浏览器,我使用的是 chrome 12): JSFIDDLE: Page Flip

预览:

The overlapping region is the one to SHOW

我想要做的是不显示蓝色矩形之外的红色矩形区域。我的问题在于重叠区域(紫色区域)的 MASKING/CLIPPING。我试图将页面(红色)div 嵌入掩码(蓝色)div 并设置 overflow : hidden但问题是每当蒙版(蓝色)旋转时,页面(红色)也会旋转,并且计算无处可去,无法用偏移量进行校正。

还有其他方法可以裁剪这个区域吗?

最佳答案

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

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

关于html - 在没有 Canvas 元素的情况下在 HTML 中裁剪 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6847797/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com