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 🙂