CSS3 3d 变换 - 对于 webkit 浏览器，具有不同 z 索引的重叠 div 会产生不同的结果
我试图找出哪个浏览器没有实现此权利：我有 2 个 div 彼此叠置。对于前一个，我旋转 Y 轴并平移 X 轴。现在，对于同一个，我设置了比另一个更低的 z-index。我看到 Chrome / Safari 有 2 个不同的输出。哪一个更有意义。这是我的测试： http://jsfiddle.net/f5VWN/
我想问题可以简化为：给定 3d 空间中的 2 个元素， z 是否-索引很重要:)？
I am trying to figure out which browser is not implementing this right: I have 2 divs positioned on top of each other. For the front one I rotate the Y axis and translate the X axis. Now for this same one I set a lower z-index than the other one. I see 2 different outputs for Chrome / Safari. Which one is the one that makes more sense. Here's my test:
http://jsfiddle.net/f5VWN/
I guess the problem can be shortened to: Given 2 elements in 3d space, does the z-index matters at all :) ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
根据规范：
Safari 渲染不正确。然而，无论如何，我不会让你的布局依赖于这种技术。
According to the spec:
Safari is rendering it incorrectly. However, regardless, I would not make your layout depend on this technique.
默认情况下，元素的后代会平铺到父级平面中，因此前后 div 不会共享相同的 3D 空间。它们只是被转换并分别放置在容器 div 的顶部，这会导致后面的 div 绘制在前面的 div 的顶部。要在同一 3D 空间中转换元素，为子 div 提供 3D 重叠，请将容器中的
-webkit-transform-style属性设置为preserve-3d：< a href="http://jsfiddle.net/f5VWN/2/" rel="nofollow">http://jsfiddle.net/f5VWN/2/z-index 仍然很重要，特别是当两者元素重叠 彼此。
Descendants of an element are flattened into the parent's plane by default, so the front and back divs aren't sharing the same 3D space. They're just transformed and laid on top of the container div separately, which causes the back div to be drawn on top of the front div. To transform the elements in the same 3D space, giving 3D overlapping to the child divs, set the
-webkit-transform-styleproperty topreserve-3din the container: http://jsfiddle.net/f5VWN/2/The z-index still matters, particularly when the two elements overlap each other.