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

Question

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.

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 .

Answer 1

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);