title: Replacing preserve-3d using jquery for use with IE
body: <p>So, I've got this simple cardflip using jquery on fiddle: </p>
  
  <p><a href="http://jsfiddle.net/u4v5enfp" rel="nofollow">http://jsfiddle.net/u4v5enfp</a></p>
  
  <pre><code>$(".flip").hover(function(){
    $(this).find(".card").toggleClass("flipped");
      return false;
  });
  </code></pre>
  
  <p>It works on all browsers I have tried (or at least would work with some webkittery), except, you guessed it, IE.</p>
  
  <p>I was thinking since preserve-3d is supposed to pass on the 3d transforms to the child elements, I could just fiddle around with the jquery to get it working. So I made this silly thing:</p>
  
  <p><a href="http://jsfiddle.net/7x0es3pa/2" rel="nofollow">http://jsfiddle.net/7x0es3pa/2</a></p>
  
  <pre><code>card = $(".card");
  $(".flip").hover(function () {
      flip(card);
      return false;
  });
  
  function flip(el) {
      children = el.children();
      el.toggleClass('flipped');
      //if IE
      children.toggleClass('flipped');
  }
  </code></pre>
  
  <p>Imagine "if" there works (so tested on IE/doesn't have to work on other browsers).</p>
  
  <p>My understanding of the workings of 3d transforms and preserve-3d is probably at fault here, but I'm out of ideas. Preferably this should work without changing the CSS.</p>
  
  <p>First question, I hope I didn't mess up too much. Any help appreciated.</p>