css 3d transforms and zindex fighting

Question

I have two <div> elements that overlap eachother, like:

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

So I add B to the DOM after A. Inside div A I have some other html elements (images) that I apply css3d transforms to, however when I do this they also appear infront of div B, I always want div B to be above div A and all of its content. I tried setting the z-index property on both div elements but the 3d transformed items in A still render ontop of div B.

Any way to always make B appear infront of A and it's content?

Thanks Mark.

Answer 1

If you need an elements's z-index to work against 3d transformed divs, you have to style it with -webkit-transform: translateZ(0px);

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