Adding a flip effect to content on your Web page can be a handy way to show extra content. In this case, I’m showing an example flip effect that happens on the click of a button above the area. You can click the button multiple times to have the front or the back of the flip area show.
Basic Settings
.flip-container, .front, .back {
width: 1261px;
height: 360px;
}.front, .back {
border:1px solid black;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: 1.9s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}Note that to get all of this working, you’ll have to toggle the hover CSS class
$(window).load(function () {
$('#FlipToggle').click(function () {
document.querySelector('#divFlipContainer').classList.toggle('hover');
});
});Compensating for IE11 Quirkiness
For IE11 compatibility you’ll need to add special -ms-transform operations in order for this code to work. Otherwise the flip will simply never happen in IE11. None of the other browsers such as FireFox or Chrome have this problem, and I haven’t been able to pinpoint in IE11 what could cause the behavior.
To fix the problem with IE11, you can target it directly using the -ms-transform style. IE is the only browser that considers this style, even MS Edge is unaffected. As part of the -ms-transform style you need to set the rotateY to 180 degrees. Without this, IE11 will not do the flip effect. Like I mentioned, this will not affect the other browsers because of the -ms-transform style.
Here is the style:
.flip-container.hover .flipper {
-ms-transform: rotateY(180deg);
}But wait, there’s more!
You need to add an additional style: –ms mirror for the flip to work in IE11. By default IE11 will show the back of the flipped element mirrored so everything is backwards including the writing. No other browsers have this issue, so to correct this in IE, we have to completely mirror the back layer using the -ms (IE-only) style. This has the additional side effect of giving the flip effect in IE11 a twist effect as well, that is actually neat.
The Example Code:
For starters, create a blank HTML page on your PC. Make sure you add the following Meta Tags. These tell the browser not to cache the document, and tell IE to use the most recent rendering version (IE=EDGE) rather than trying to use the least recent version.
META HTTP-EQUIV="Pragma" CONTENT="no-cache" META HTTP-EQUIV="Expires" CONTENT="-1" meta http-equiv="X-UA-Compatible" content="IE=edge"
Here is the code for the example page. You can copy and paste this into a blank HTML file to try it out for yourself.
<!doctype html>
<html lang="en">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://code.jquery.com/jquery-1.6.js" integrity="sha256-p8mNoqAmClyKxhXK2Va4siC3otc9hTZNz3e2P5LpB7M=" crossorigin="anonymous"></script>
<style type="text/css">
.flip-container {
perspective: 1261px;
transform-style: preserve-3d;
position: relative;
}
.flip-container.hover .flipper {
-ms-transform: rotateY(180deg);
}
.flip-container.hover .back {
transform: rotateY(0deg);
-ms-transform: scale(-1, 1);
}
.flip-container.hover .front {
transform: rotateY(180deg);
}
.front {
background-color:yellow;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background-color:pink;
border: solid 2px #034baf;
}
.flip-container, .front, .back {
width: 1261px;
height: 360px;
}
.flipper {
transition: 1.9s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
border:1px solid black;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: 1.9s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<Body>
<button id="FlipToggle" type="button" class="btn btn-info" runat="server">Flipping Button <i class="fa fa-folder-open-o fa-lg" aria-hidden="true"></i></button>
<div id="divFlipContainer" class="flip-container">
<div class="flipper" >
<div class="front">
THIS IS THE DEFAULT FRONT OF THE FLIPPER
</div>
<div class="back">
THIS IS THE BACK OF THE FLIPPER
</div>
</div>
</div>
<script type="text/javascript">
$(window).load(function () {
$('#FlipToggle').click(function () {
document.querySelector('#divFlipContainer').classList.toggle('hover');
});
});
</script>
</body>
</html>
Justin Cooney 
could help to have the sample on something like jsfiddle