css trasforma 3d e combattimenti zindex

Question

Ho due <div> elementi che si sovrappongono vicenda, come:

------------- 
|   | 
|  A  | 
|   | 
| ------------ 
| |   | 
| |   | 
----|  B | 
    |   | 
    ------------ 

Così ho aggiungere B al DOM dopo A. All'interno div AI avere alcuni altri elementi HTML (immagini) che ho applica le trasformazioni di css3d a, tuttavia quando lo faccio appaiono anche di fronte al div B, voglio sempre che div B sia sopra il div A e tutto il suo contenuto. Ho provato a impostare la proprietà z-index su entrambi gli elementi div ma gli elementi trasformati 3d in A continuano a rappresentare ontop di div B.

Qualsiasi modo per far apparire B sempre di fronte A e il suo contenuto?

Grazie Mark.

Answer 1

funziona: http://jsfiddle.net/qkLWH/1/

Answer 2

Se avete bisogno di z-index un elementi di lavorare contro 3d trasformato div, si deve per lo stile con -webkit-transform: translateZ(0px);

Snippet su codepen ->http://codepen.io/mrmoje/pen/yLIul