Jquery/CSS help needed to make fallback for IE and older browsers
- by matt_50
Wondering if any of you can help me:
I've made a signup modal that uses a CSS transform to switch between two methods of signing up. I've decided to try a 'card flip' type effect.
Have a look at this JSfiddle in any browser that supports CSS 3D transforms - click the 'old fashioned way' text to 'flip' the modal (simplified for demo purposes):
http://jsfiddle.net/voodoo6/cnTMz/8/
Then take a look in IE8/9 - as the 'back' is taller than the front and IE does;t support 'backface-visibility: hidden;' the reverse can be seen below the front.
I've been trying to use JQuery and conditional CSS to 'display:none' the 'back' on load in IE (and older browsers), then add a 'display:block;' class to show it on click, problem is, I'm a JQuery beginner and have been struggling to get it to work! Not even sure if this is the best approach? Can anybody suggest an approach that would get this working in less-capable browsers?
Thanks for any advice..