CSS3 3D变换 - 重叠的div不同的z指数有不同的结果WebKit的浏览器 [英] CSS3 3d transforms - Overlapping divs with different z-indexes has different results for webkit browsers

问题描述

我试图找出哪些浏览器不执行这一权利：我有2的div定位在彼此顶部。对于前一个I旋转Y轴和平移X轴。现在对于这同样一个I设置更低的z索引比另一个。我看到的Chrome / Safari浏览器2种不同的输出。哪一个是一个更有意义。下面是我的测试： http://jsfiddle.net/f5VWN/

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/

我想这个问题可以简化为：？在3D空间中考虑到2元，难道的z-index事项在所有:)

I guess the problem can be shortened to: Given 2 elements in 3d space, does the z-index matters at all :) ?

推荐答案

按照规范

上的转化的元件的Z轴的位置不会影响   一个堆叠环境中的顺序。

The position on the Z axis of a transformed element does not affect the order within a stacking context.

Safari浏览器被错误地渲染它。不过，无论如何，我不会让你的布局依赖于这种技术。

Safari is rendering it incorrectly. However, regardless, I would not make your layout depend on this technique.

这篇关于CSS3 3D变换 - 重叠的div不同的z指数有不同的结果WebKit的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！