CSS3 3d變換 - 具有不同z索引的重疊div對webkit瀏覽器有不同的結果

Question

我想弄清楚哪個瀏覽器沒有實現這個權利：我有2個div位於彼此之上。對於前面的一個，我旋轉Y軸並平移X軸。現在對於同樣的一個，我設置了一個比另一個低的z-索引。我看到Chrome/Safari有兩種不同的輸出。哪一個更有意義。這是我的測試： http://jsfiddle.net/f5VWN/

我想這個問題可以縮短爲：給定3d空間中的2個元素，z-index是否至關重要？

Answer 1

按照spec：

上變換元件的Z軸上的位置不影響 一個堆疊環境內的順序。

Safari正在渲染它不正確。不過，無論如何，我不會讓你的佈局依賴於這種技術。

Answer 2

默認情況下，元素的後代平鋪到父級平面中，所以前後div不共享相同的3D空間。它們只是被轉換並分別放置在容器div的頂部，這導致後部div被繪製在前部div的頂部。以變​​換元件在相同的3D空間，讓3D重疊孩子的div，在容器中設置的-webkit-transform-style屬性preserve-3d：http://jsfiddle.net/f5VWN/2/

的z索引仍然重要，特別是當兩個元件彼此重疊。