CSS3 rotation/transform strange issue

Question

I have a unique situation, instead of doing a modal to display some options I'm trying to use some 3D transforms to have a "flipping" motion which shows some inputs on the "back" of a view.

I have created a codepen to show the functionality as well as the issue.

The issue is when I flip over the div the bottom half of my back-facing form is not clickable, almost like it has some element on top of it that I can't see. It is exactly the bottom 50% that is not editable so I'm guessing something with how I'm doing my rotation is wrong.

http://codepen.io/CollinEstes/pen/qcwhd

Answer 1

I was able to fix your example: http://codepen.io/MikeFielden/pen/haHrG

All I ended up doing was change your rotateX(180deg) to rotateX(-180deg) and that appears to clear it up. As for why its doing this I cannot say. A browser bug perhaps?