CSS flip code will not work in IE11

Question

I am trying to create a flip animation for some images that, when they are flipped, display the corresponding link text. This works fine in all browsers I tested, but IE11.

I read that there is a problem with transform-style: preserve-3d; for IE10, but since I'm new to CSS, I was unable to find a way to fix the encoding.

Here is the HTML:

<div class="flipcontainer"> <div class="flipscene3D"> <div class="flip"> <div> <p> <a itemprop="url" href="ARC3RFC.html"><span itemprop="headline">ARC3RFC Essay: Tomb 100, Tomb UJ and Maadi South: Themes from Predynastic Egypt</span></a> - 2013 </p> </div> <div> <img src="ARC3RFC.jpg" class="flipimg"> </div> </div> </div> </div> 

And CSS:

 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); } 

Answer 1

Check out this Flipping demo animation. I hope this solves your problem.

Check out DEMO .

Here is the HTML code.

 <div class="wrapper"> <div class="front anim"> Chrome </div> <div class="back anim"> IE </div> </div> 

Here is the CSS code.

 .wrapper { width: 300px; height: 300px; margin: auto; position: relative; } .anim { width: 100%; height: 100%; -o-transition: all .5s; -ms-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0px; left: 0px; } .front { z-index: 2; background: url(http://lorempixel.com/300/300/) no-repeat; } .back { z-index: 1; -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); transform: rotateX(-180deg); background: url(http://placehold.it/300x300) no-repeat; } .wrapper:hover .front { z-index: 1; -webkit-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); } .wrapper:hover .back { z-index: 2; -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } 

Answer 2

  .flipscene3D:hover .flip { /*transform*/ -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand'); }