移动webkit视角问题

发布于 2024-12-10 14:03:15 字数 268 浏览 0 评论 0原文

3d 旋转 div 会穿过另一个具有较高 z-index 的 div,无论 z-index Δ 或透视差异如何。 这在 iOS 4 上的 safari、safari mobile 中工作正常,但在 iOS 5 上我可以看到问题

http://jsfiddle.net/voidbrain/cuHn5/7/embedded/result/

A 3d rotating div cuts through another div with a higher z-index, no matter z-index Δ or perspective difference.
This works fine in safari, safari mobile on iOS 4 but on iOS 5 i can see the issue

http://jsfiddle.net/voidbrain/cuHn5/7/embedded/result/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

陪你搞怪i 2024-12-17 14:03:15

被切入的“带”DIV 基本上位于 z 轴上的位置 0。为了使其不被沿 y 轴旋转的其他 DIV 切割,您需要将“丝带”DIV 在 z 轴上推回至少为旋转 DIV 宽度一半的距离。例如,如果旋转 DIV 的宽度为 100px,则将以下 CSS 应用到“ribbon”DIV:

-webkit-transform:translate3d(0, 0, 50px)

The "ribbon" DIV that is getting cut into is essentially at position 0 on the z-axis. In order to have it not get cut by the other DIV rotating along the y-axis, you need to push the "ribbon" DIV back on the z-axis by a distance at least half the width of the rotating DIV. For example, if the rotating DIV has a width of 100px, then apply the following CSS to the "ribbon" DIV:

-webkit-transform: translate3d(0, 0, 50px)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文