Trasformazioni 3D CSS3 - Le div sovrapposte con indici z diversi hanno risultati diversi per i browser Webkit

Question

Sto cercando di capire quale browser non sta implementando questo diritto: Ho 2 div posizionati uno sopra l'altro. Per quello anteriore ruoto l'asse Y e traduco l'asse X. Ora per quello stesso ho impostato uno z-index più basso dell'altro. Vedo 2 uscite diverse per Chrome/Safari. Qual è quello che ha più senso. Ecco il mio test: http://jsfiddle.net/f5VWN/

Immagino che il problema possa essere abbreviato: dati 2 elementi nello spazio 3d, lo z-index è importante :)?

Answer 1

Secondo il spec:

La posizione sull'asse Z di un elemento trasformata non influisce l'ordine in un contesto di stratificazione.

Safari lo sta visualizzando in modo errato. Tuttavia, a prescindere, non farei dipendere il tuo layout da questa tecnica.

Answer 2

I discendenti di un elemento vengono appiattiti nel piano del genitore per impostazione predefinita, quindi le div anteriori e posteriori non condividono lo stesso spazio 3D. Sono appena trasformati e posizionati sopra il div contenitore separatamente, il che fa sì che il div posteriore sia disegnato in cima al div anteriore. Per trasformare gli elementi nello stesso spazio 3D, dando sovrapposizione 3D per div bambino, impostare la proprietà -webkit-transform-style al preserve-3d nel contenitore: http://jsfiddle.net/f5VWN/2/

L'indice z è ancora importante, soprattutto quando i due elementi si sovrappongono.