CSS3 3d转换 - 具有不同z索引的重叠div对于webkit浏览器具有不同的结果

Question

我想弄清楚哪个浏览器没有实现这个权利：我有2个div位于彼此之上。对于前面的一个，我旋转Y轴并平移X轴。现在对于同一个我设置一个比另一个更低的z-index。我看到Chrome / Safari有两种不同的输出。哪一个更有意义。这是我的测试： http://jsfiddle.net/f5VWN/

我想问题可以缩短为：给定3d空间中的2个元素，z-index是否重要:)？

Answer 1

根据spec：

  

转换元素的Z轴上的位置不会影响   堆叠环境中的顺序。

Safari正在渲染错误。但是，无论如何，我都不会让你的布局依赖于这种技术。

Answer 2

默认情况下，元素的后代会展平到父级的平面中，因此前后div不会共享相同的3D空间。它们只是被转换并分别放在容器div的顶部，这导致后部div被绘制在前部div的顶部。要转换同一3D空间中的元素，为子div提供3D重叠，请在容器中将-webkit-transform-style属性设置为preserve-3d：http://jsfiddle.net/f5VWN/2/

z-index仍然很重要，特别是当两个元素相互重叠时。