Mouse is Clicking Through the Back of My 3D CSS Flip Box

[koenigsegg1]

I am building a contact form on Codepen. When the form is complete it will flip vertically to show a success or error message. However, when the message is displayed, my mouse can click through the message and type in the input fields or click the submit button. How can I stop this from happening?

My pen is at http://codepen.io/koenigsegg1/pen/gaVZKm
Hint: click the buttons on either side of the form to trigger the messages.

[Shikkediel]

I think backface-visibility: hidden should do the trick. Not exactly sure on which elements though but a * selector seems to solve it. It’s not an issue at all with Firefox apparently.

[koenigsegg1]

Thanks. that seems to fix it. However, after i added the code, the close button in the success/error message no longer works. When hovered, the background should change and when clicked, the modal should close. For some reason it’s not working anymore. Any suggestions?

[Shikkediel]

Tricky question, using * messes with all stacking context I guess. Couldn’t tell you exactly why this happens. It’s a bit unnecessary to use this indiscriminate selector, it was really just a general indication of how it could be fixed. Let me look into it a bit more.

Edit – .group, buttonseems to be a better target…

[koenigsegg1]

Thanks. It’s kinda working now. The right side of the button is still unresponsive (I think the submit button is messing it up even with backface-visibility: hidden;) but i think I can just re-position the button higher and it should work.

[koenigsegg1]

Sorry, accidental double-post :)

[Shikkediel]

Oh yeah, I didn’t notice that. Not a clue why it would be happening on the right side only to be honest. Using z-index isn’t very straightforward on a 3D translation either. They’re pretty weird. One of those things I (still) lack full understanding of.

Sidenote… this must be painful to watch.

https://www.youtube.com/watch?v=pbr_aAu4uuM

[Author]

Posts