移动webkit视角问题
3d 旋转 div 会穿过另一个具有较高 z-index 的 div,无论 z-index Δ 或透视差异如何。 这在 iOS 4 上的 safari、safari mobile 中工作正常,但在 iOS 5 上我可以看到问题
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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
被切入的“带”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)