Hello developers, Today I am going to show you how to make flip effect work in IE.
Here, I have made two sided flipper card. It is working in all browsers but flip effect doesn’t work in IE.
When I hover on “front” it shows front instead of “back”. There is a problem with the backface-visibility in IE. Please check below solution.
HTML
<div class="flip-container"> <div class="flipper"> <div class="front"><h1>Front</h1></div> <div class="back"><h1>Back</h1></div> </div> </div>
CSS
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .flipper:hover .front { visibility: hidden; transform: rotate(0deg); transition: 0.2s; -webkit-transition: 0.2s; } .flipper:hover .back { backface-visibility: visible; } }
Output
On hover flip effect working fine.
I hope that it was useful.
Thank You 🙂