search

desandro / 3dtransforms

:package: Introduction to CSS 3D transforms
https://3dtransforms.desandro.com/
1.01k stars 163 forks source link

IE10 possible bug #8

Open desandro opened 11 years ago

desandro commented 11 years ago

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 commented 10 years ago

This is also the case in IE 11.

paulekmx commented 10 years ago

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 commented 10 years ago

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.

ghost commented 9 years ago

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 commented 9 years ago

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.