title: CSS flip code won't work in IE11
body: <p>I am trying to create a flip animation for some images, which when they turn over, display appropriate link text. This works perfectly in all browsers that I have tested, but IE11.</p>
  
  <p>I read that there is a problem with transform-style: preserve-3d; for IE10, but as I am a CSS beginner, I have been unable to figure out a way to correct the coding.</p>
  
  <p>Here is the HTML:</p>
  
  <blockquote>
  <pre><code>  &lt;div class="flipcontainer"&gt;
      &lt;div class="flipscene3D"&gt;
          &lt;div class="flip"&gt;
              &lt;div&gt;
                  &lt;p&gt;
                      &lt;a itemprop="url" href="ARC3RFC.html"&gt;&lt;span itemprop="headline"&gt;ARC3RFC Essay: Tomb 100, Tomb U-J and Maadi South: Themes from Predynastic Egypt&lt;/span&gt;&lt;/a&gt; - 2013
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;img src="ARC3RFC.jpg" class="flipimg"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p>And the CSS:</p>
  
  <blockquote>
    <p></p>
  </blockquote>
  
  <pre><code>img.flipimg {
              height: 150px;
              width: 150px;
              /*border-radius*/
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              border-radius: 5px;
          }
          .flipcontainer {
              display: block;
              width: 760px;
              height: 700px;
              margin: 30px auto;
          }
          .flipscene3D {
              display: block;
              float: left;
              margin: 10px;
              /*border-radius*/
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              border-radius: 5px;
              /*perspective*/
              -webkit-perspective: 300px;
              -moz-perspective: 300px;
              -ms-perspective: 300px;
              -o-perspective: 300px;
              perspective: 300px;
          }
          .flip div {
          position: absolute;
          width: 150px;
          height: 150px;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
          -o-backface-visibility: hidden;
          backface-visibility: hidden;
          z-index: 500
          }
          .flip div:first-child {
              font-size: 12px;
              /*border-radius*/
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              border-radius: 5px;
              background: #333;
              /*transform*/
              -webkit-transform: rotateX(180deg);
              -moz-transform: rotateX(180deg);
              -ms-transform: rotateX(180deg);
              -o-transform: rotateX(180deg);
              transform: rotateX(180deg);
          }
          .flip div:first-child p {
              color: #FFF;
              text-shadow: 0 0 1px .111;
              padding-top: 10px;
              text-align: center;
          }
          .flip {
              width: 150px;
              height: 150px;
              /*border-radius*/
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              border-radius: 5px;
              /*box-shadow*/
              -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
              -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
              box-shadow: 0 0 15px rgba(0,0,0,0.3);
              /*transform*/
              -webkit-transform: rotateX(0deg);
              -moz-transform: rotateX(0deg);
              -ms-transform: rotateX(0deg);
              -o-transform: rotateX(0deg);
              transform: rotateX(0deg);
              /*transition*/
              -webkit-transition: all 1s ease;
              -moz-transition: all 1s ease;
              -o-transition: all 1s ease;
              transition: all 1s ease;
              /*transform-style*/
              -webkit-transform-style: preserve-3d;
              -moz-transform-style: preserve-3d;
              -ms-transform-style: preserve-3d;
              -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
          }
          .flipscene3D:hover .flip {
              /*transform*/
              -webkit-transform: rotateX(180deg);
              -moz-transform: rotateX(180deg);
              -ms-transform: rotateX(180deg);
              -o-transform: rotateX(180deg);
              transform: rotateX(180deg);
          }
  </code></pre>