CSS3, HTML, HTML5, JavaScript, JQuery, Programming

Simple CSS Only Flip Effect for a Div

FlipEffect

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

For starters, you’ll want to set the height and width of the front and back of your flip-able div (and you’ll want them to be the same size).
 
.flip-container, .front, .back {
width: 1261px;
height: 360px;
}
 
You’ll also want to set the speed of the flip animation using the transition style. You can set the location of the divs by positioning them absolutely and specifying both of their locations relative to the page using top and left. Also it’s important to set the visibility of the back part of the flip area using backface-visibility: hidden.
.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>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s