Inspiration For Creative Minds
Home » Labs » CSS Horizontal Flip Animation Code with Demo  

Filed under Labs

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

It's only fair to share...Share on Google+Tweet about this on TwitterShare on Facebook
Labs

Posts you may like: