title: css card flip internet explorer
body: <p>I'm stuck on this and I've run into a brick wall, all works in Chrome, FF, Safari etc but in Internet Explorer, I get the reverse side of the front image rather than backside text, please help!!! I'm sure there's a simple answer I've overlooked but I'm on a deadline and desperatly need to get this wrapped up.</p>
  
  <p>Thanks in advance for any help :)</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>flip-container {
  perspective: 1000px;
  -webkit-perspective:1000px;
  
  
  }
      /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  font-family: "Montserrat Alternates regular";
  text-align: center;
  }
  
  .flip-container, .front, .back {
  width: 250px;
  height: 250px;
  font-family: "Montserrat Alternates regular";
  
  }
  
  /* flip speed goes here */
  .flipper {
  -webkit-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
  
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  position: relative;
  }
  
  /* hide back of pane during swap */
  .front, .back {
  -webkit-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  backface-visibility: hidden;
  
  
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  
  }
  
  /* front pane, placed above back */
  .front {
  z-index: 2;
  border: 2px solid black;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -khtml-border-radius: 30px;
  -webkit-border-radius: 30px;
  -webkit-transform: rotateY(0deg);
   -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  width: 246px;
  height: 246px;
  }
  
  /* back, initially hidden pane */
  .back {
  z-index:3;
  background-color: #fff;
  border: 2px solid black;
          border-radius: 30px;
          -moz-border-radius: 30px;
          -khtml-border-radius: 30px;
          -webkit-border-radius: 30px;
          width: 246px;
          height: 246px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  
  }
  
  
  HTML:
  
  &lt;div class="grid-element"&gt;
  &lt;div class="flip-container" ontouchstart="this.classList.toggle('hover');"&gt;
  &lt;div class="flipper"&gt;
  
  
        &lt;div class="front" style="background: url('images/flip2.jpg');" /&gt;
      &lt;span style="font-family: 'Montserrat Alternates regular';
   font-weight:bolder; text-align: center; position: relative; top: 190px; font-size:  
  18pt;"&gt;Who Are We?&lt;/span&gt; &lt;/div&gt;
      &lt;div class="back"&gt;
  
  &lt;div  style="text-align: center; font-family: 'Montserrat Alternates regular';     
  font-size: 10pt; position: relative; top: 10px;margin-left:10px; margin-right:10px;   
  margin-top:10px;"&gt;Founded by writers Kurt McClung and Simon Mackenzie to offer   
  complete story solutions for ambitious entertainment in various media: from video  
  games to comic books, theater and screen, novels to song writing.&lt;/div&gt;
  &lt;img src="images/kurt.png" style="position:absolute; top:155px; left:18px; width:75px; 
  height:75px"/&gt;
  &lt;img src="images/simon.png" style="position:absolute; top:155px; left:152px;   
  width:75px; height:75px"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  Target site : http://www.taliespin.com
  </code></pre>