CSS flip code won't work in IE11
11,000
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);
}
Author by
Admin
Updated on June 17, 2022Comments
-
Admin almost 2 years
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); }
-
Admin almost 10 yearsThanks very much. I ended up changing the code to another script completely, and it is now working. To see the working code, it is online temporarily at thekeep.org/~kunoichi/kunoichi/themestream/author2.html
-
Admin almost 10 yearsIt was actually saina's comment that fixed it. But thank you for your suggestion, none the less.
-
Admin almost 10 yearsThanks for that, though it didn't fix the problem at my end. IE still does the flip, but shows the flipped image rather than the text: thekeep.org/~kunoichi/kunoichi/themestream/test.html
-
Kheema Pandey over 9 yearsthis is strange last day I got +1 and now today again get DownVoting.. who is the person are doing thing. Moderator should take this issue seriously and do needful action on this matter.
-
Stijn de Witt over 7 yearsMaybe it's people like me, that when viewing your demo just see the element disappearing and then the backside appearing? No animation is playing at all for me on IE11. To be fair most flip demos are not working correctly on IE11, but the question is specific about that version. Anyway, I did not downvote you but this answer isn't helping me either.
-
Claudiu Creanga almost 7 yearsThis doesn't flip in IE 11