CSS Horizontal Flip Animation Code with Demo

Today CSS plays an important role in web development, and latest version of Cascading Style Sheets (CSS) is powerful to make animations too. Adobe flash animation is old method and trending is making animations without flash. Flash has many drawbacks comparing to jQuery and CSS, so minimize the usage of flash is a good idea.
Here is an example of Flip animation which is build on CSS only, it uses the feature 3D Transforms and hence its only worked in modern browsers which supports 3D Transforms.

Here is the code used for building CSS Horizontal Flip Animation, and you can view the a working demo at bottom of this post.

CSS

 
	.outer { 
		width:275px; 
		height:475px; 
		-webkit-perspective:900px; 
		margin-left:40%; 
	}
	.outer div { 
		width:275px; 
		height:475px; 
		transition:all .6s; 
		position:absolute; 
	}
	.front { 
		z-index:999; 
	}
	.back { 
		z-index:-999; 
		-webkit-transform:rotateY(180deg); 
		-moz-transform: rotateY(180deg); 
		-o-transform: rotateY(180deg); 
		-ms-transform: rotateY(180deg); 
		transform: rotateY(180deg); 
	}
	.outer:hover .front { 
		-webkit-transform:rotateY(-180deg);
		-moz-transform: rotateY(-180deg);
		-o-transform: rotateY(-180deg);
		-ms-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
		z-index:-999; 
		cursor:pointer; 
	}
	.outer:hover .back { 
		-webkit-transform:rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
		z-index:999;
		cursor:pointer; 
	}

HTML

 
				<!-- Flip -->
 
					<div class="outer">
						<div class="front"><img src="images/front.png"/></div>
						<div class="back"><img src="images/back.png"/></div>
					</div>
 
				<!-- End of Flip -->

Live Demo

Related posts:

Partner with Us

We are providing an exclusive partnership offer to individuals and companies who are interested in setting up their own web design & development company. For more information about how to partner with us, please contact us