title: Card flip animation Internet Explorer 11
body: <p>I am trying to make a card flip and show its backside. It works in all other browsers but not in Internet Explorer 11.</p>
  
  <p>I've tried adding -ms- prefaces, but that didn't help. The problem seems to be that IE does not support the css attribute <code>transform-style: preserve-3d</code>.</p>
  
  <p>Here is a jsfiddle: <a href="https://jsfiddle.net/gbkq94hr/" rel="noreferrer">https://jsfiddle.net/gbkq94hr/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;article&gt;
          &lt;div id="card0" class="card"&gt;
              &lt;figure class="front"&gt;
              &lt;/figure&gt;
              &lt;figure class="back"&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
      &lt;/article&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function () {
      var flipped = false;
      var card = $("#card0");
      card.click(function() { flipFunction();});
  
      function flipFunction() {
          if (flipped) {
              flipped = false;
              card.removeClass('flip');
          } else {
              card.addClass('flip');
              flipped = true;
          }
      };
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html {
      height: 100%;
  }
  
  .flip {
      transform: rotateY(180deg);
  }
  
  .card {
      float:left;
      width: 110px;
      height: 139px;
      cursor: pointer;
      transform-style: preserve-3d;
      transition: transform 1s;
      position: relative;
  }
  
  figure {
      margin: 0;
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -ms-backface-visibility:hidden;
  }
  
  .back {
      background-color: blue;
      transform: rotateY(-180deg);
  }
  
  .front {
      z-index: 2;
      background-color: red;
      transform:rotateY(0deg);
  }
  
  article {
      height: 114px;
      width: 114px;
      perspective: 1000;
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>As suggested in the comments, I tried following David Walshes instructions, but still couldn't get it to work. <a href="https://jsfiddle.net/w9o2chmn/2/" rel="noreferrer">https://jsfiddle.net/w9o2chmn/2/</a></p>