CSS flip code won't work in IE11

css, flip, html, internet-explorer

Solution

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

Problem

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

Original source

Related problems