CSS flip code won't work in IE11 - html

Question

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.
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.
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 U-J and Maadi South: Themes from Predynastic Egypt</span></a> - 2013
</p>
</div>
<div>
<img src="ARC3RFC.jpg" class="flipimg">
</div>
</div>
</div>
</div>
And the 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

Have a look at this Flipping animation Demo. I hope it will solve your problem.
Check the DEMO.
Here is the HTML code look like.
<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');
}