title: CSS3 RotateY Tile Flip doesn't work in Internet Explorer?
body: <p>I've created a CSS3 tile flip effect with the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="flip-container"&gt;
  &lt;div class="flipper"&gt;
  &lt;div class="front img1"&gt;
  &lt;/div&gt;
  &lt;div class="back" id="back1"&gt;&lt;/div&gt; // img1 and back1 are specified in the CSS with the background-image property.
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.flip-toggle.flip .flipper {
      -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      transform: rotateY(180deg);
  }
  
  .back {
      -ms-transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      transform: rotateY(180deg);
      border: 0;
  }
  </code></pre>
  
  <p>However, as can be seen <a href="http://leonkempers.com/peter/index2.php" rel="nofollow">here</a>, the effect doens't work properly. On Chrome, Firefox and Safari, it properly displays the back image of each tile, but Internet Explorer simply mirrors the front image.</p>
  
  <p>How can I solve this? Any help would be much appreciated!</p>