IE10 possible bug

[desandro]

From Eric via email

Using your extremely helpful guide (http://desandro.github.io/3dtransforms/docs/card-flip.html), I was able to build a flashcard study tool for my students, that works on most browsers and tablets. I had largely ignored IE, as my other tools did not work in that browser either, but after some quick workarounds, I was able to solve those problems.

Unfortunately, I have not been so lucky with your card flip demo. At first, I thought it was something to do with my code, but both of our sets of code perform the same on IE 10:

1. Card loads fine.
2. User "flips" the card
3. The back side flips, but the text is reversed--mirrored--in IE 10.

Any idea on a work around for this? I tried adding the "-ms" vendor properties to each respective CSS property, but that did not work.

[emosterd]

This is also the case in IE 11.

[paulekmx]

I had the same issue on IE. I just change the css to help IE flip both cards.

#card .front {
background: red;
}
#card .back {
background: blue;
transform: rotateY( 180deg );
}

Since we have the '.back' card already flipped, I made two states so that IE could make the animation on both cards and It worked!!

#card:hover .front {
transform: rotateY( 180deg );
}
#card:hover .back {
transform: rotateY( 0deg );
}

[stanwmusic]

paulekmx ! I recently got a Win 8 box to test with, but I hadn't tested this in IE yet. I've been using Linux many years almost exclusively.

Hey guys, has anyone of you had luck on solving this? Even in the latest version of IE, the back of the card doesn't actually flip. Instead, it flips the view of the front card reversing the texts like the one stated above.

[emosterd]

I switched to this:

http://www.codicode.com/art/3d_flipping_cards_pure_css3_card_flip_plugin.aspx

Which has worked in every recent browser I have tried, including mobile browsers such as Mobile Safari, and Chrome on Android.

Since the approaches are very similar you can probably adapt it pretty quickly to what you are doing. I'm a mediocre programmer and it only took me about an hour to convert all of my code.