CSS vertical flip animation code with demo

Few days ago we posted ‘CSS Horizontal Flip Animation Code With Demo‘ on our labs, and now we are sharing an example of vertical flip animation which is build on CSS only. You can view a working demo after the code explanation.

CSS for vertical flip animation

	.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:rotateX(180deg);
		-moz-transform: rotateX(180deg);
		-o-transform: rotateX(180deg);
		-ms-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}
	.outer:hover .front { 
		-webkit-transform:rotateX(-180deg);
		-moz-transform: rotateX(-180deg);
		-o-transform: rotateX(-180deg);
		-ms-transform: rotateX(-180deg);
		transform: rotateX(-180deg);
		z-index:-999; 
		cursor:pointer; 
	}
	.outer:hover .back { 
		-webkit-transform:rotateX(0deg);
		-moz-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		transform: rotateX(0deg);
		z-index:999;
		cursor:pointer; 
	}

HTML for vertical flip animation

 
			<!-- Flip -->
 
				<div class="outer">
					<div class="front"><img src="images/front.png" alt="front"/></div>
					<div class="back"><img src="images/back.png" alt="back"/></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