CSS3 transform rotate breaks layout and stacking order, superseding z-index


I am designing an html5 mobile application that has an overlay that appears at various points in the app. The overlay may be at the top of the z index visually, but interactively, it sites behind a div below that is intercepting clicks intended for the overlay. I think I know why it is occurring (CSS stacking context for an element below) but I don't know how to work around it.

enter image description here

This issue is very similar to this prior question but the resolutions don't seem to apply in this instance. Stacking context has never messed with me before I started applying CSS3 animations and transforms to my layouts. Now I am a mess.

So far I have tried transform-style: flat; -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); and a thousand different z-index approaches to try and keep the lower z-index elements from blocking clicks intended for the overlay. I am at a loss and could use some outside perspective.

I have a codepen that illustrates the issue perfectly here.

Problem courtesy of: AndyBean


If you use a translate3D in z to move your content back, it now works. Chang your div2 style to this:

    -webkit-transform: translate3D(0px,0px,-1px) rotateX(180deg);
Solution courtesy of: Michael Mullany


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.