CSS Flip Animation

In this tutorial, we are going to create a simple card flip effect with help of CSS transitions and transformations. This effect can be very useful to keep the user engaged.

Useful Read : Simple CSS3 Zoom Effect On Hover

HTML:

<div class="container">
	<div class="back"><img src="flip.jpg" /></div>
	<div class="front">Hover To Flip!</div>
</div>

As you can see, the HTML structure consist of a parent div with class container and two child divs each representing the front and back side of the card.

CSS:

.container{
	width: 300px;
	height: 300px;
	margin: 10px auto;
}
.container .front{
	position: absolute;
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	-moz-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
	background: #ccc;
	width: 300px;
	height: 300px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: transform .5s ease;
	-moz-transition: transform .5s ease;
	transition: transform .5s ease;
	line-height: 300px;
	text-align: center;
	font-size: 28px;
}
.container .back{
	position: absolute;
	-webkit-transform: perspective( 600px ) rotateY( 180deg );
	-moz-transform: perspective( 600px ) rotateY( 180deg );
	transform: perspective( 600px ) rotateY( 180deg );
	background: #ccc;
	width: 300px;
	height: 300px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: transform .5s ease;
	-moz-transition: transform .5s ease;
	transition: transform .5s ease;
}
.container:hover .front{
	-webkit-transform: perspective( 600px ) rotateY(-180deg);
	-moz-transform: perspective( 600px ) rotateY(-180deg);
	transform: perspective( 600px ) rotateY(-180deg);
}
.container:hover .back{
	-webkit-transform: perspective( 600px ) rotateY(0deg);
	-moz-transform: perspective( 600px ) rotateY(0deg);
	transform: perspective( 600px ) rotateY(0deg);
}

Quick Overview:

  • We are using perspective property to enable 3D space.
  • We are going to set rotateY to 0 degree for div with class .front as it is already in the front.
  • For div with .back class, we are going to set rotateY property to 180 degree to make it flipped by default. And when the animation occurs it will rotate itself to 0 degree.
  • When a user hovers over the container div, we are going to rotate .front div to -180 degree and .back div to 0 degree.
  • We are using the backface-visibilty property, to make sure users will not see the back side of the elements while they are turning around.

 

0 Comments

Leave a Comment.