Home » Labs » CSS Horizontal Flip Animation Code with Demo  

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

Posts you may like: