Przekształcenia 3D CSS3 - Nakładające się divy z różnymi indeksami z-z mają różne wyniki dla przeglądarek Webkit

Question

Próbuję dowiedzieć się, która przeglądarka nie implementuje tego prawa: Mam 2 elementy div umieszczone jeden nad drugim. W przypadku przedniej części obracam oś Y i tłumaczę oś X. Teraz dla tego samego ustawiłem niższy indeks Z niż drugi. Widzę 2 różne wyjścia dla Chrome/Safari. Który z nich jest bardziej sensowny. Oto mój test: http://jsfiddle.net/f5VWN/

Zgaduję, że problem można skrócić do: Biorąc pod uwagę 2 elementy w przestrzeni 3D, czy indeks Z jest w ogóle ważny :)?

Answer 1

Według spec:

położenie na osi Z transformowanego elementu nie wpływa kolejność w kontekście stosu.

Safari renderuje go niepoprawnie. Niezależnie od tego nie uzależniam twojego układu od tej techniki.

Answer 2

Potomkowie elementu są domyślnie spłaszczani na płaszczyźnie głównej, więc przednie i tylne elementy div nie dzielą tej samej przestrzeni 3D. Są one po prostu przekształcone i umieszczone oddzielnie na pojemniku div, co powoduje, że tylny element div jest narysowany na wierzchu przedniej części div. Aby przekształcić elementy w tej samej przestrzeni 3D, dając nakładania 3D do div dziecka, ustaw właściwość preserve-3d-webkit-transform-style w pojemniku: http://jsfiddle.net/f5VWN/2/

z-index nadal ważne, szczególnie gdy te dwa elementy nakładają się na siebie.