CSS Flip Animation

Hi there! Its been a while I have posted anything, but I find CSS animations a kind of fun

So in this example I just want to show you the beauty of CSS, just setting few properties we can create a flip effect.

Below is the basic HTML used to create the flip effect

   
<div class="main-container">
 <div class="inner_container">
  <div class="front" style="background-image:url(images/1.jpg)"></div>
  <div class="back" style="background-image:url(images/2.jpg)"></div>
 </div>
</div>
   
  

main-container is the parent container in which all the other elements will be placed. We will have to add the perspective property for this element, this will define how the 3D element will be displayed.

inner_container is the container where we set the two containers which acts as a front and back of the flip effect. This is the container which fill actually flip and provide the effect.

front is the front side of the flip, back is the back side of the flip, front and back sides will be placed on top of each other with the property "backface-visibility" as "hidden" so that the side which is at the back side will be hidden.

Below is the CSS for the flip effect

   
/* Setting background image for the example */
.front-image{
 background-image:url(images/1.jpg);
}

.back-image{
 background-image:url(images/2.jpg);
}

.front-image-sq{
 background-image:url(images/1.jpg);
}

.back-image-sq{
 background-image:url(images/2.jpg);
}

/* Setting perspective for the main container for the 1st and 2nd flip example */
.main-container, .main-container1 {
 perspective: 1000;
 -webkit-perspective: 1000;
 -moz-perspective: 1000;
 -o-perspective: 1000;
}

/* Flip the inner container when it is hovered */
.main-container:hover .inner_container, .main-container.hover .inner_container {
 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
}

/* Setting the height and width for the 1st and 2nd flip example */
.main-container, .front, .back, .main-container1, .front1, .back1{
 width: 210px;
 height: 314px;
}

/* Setting the transition properties and timings */
.inner_container, .inner_container1{
 transition: 0.9s;
 -webkit-transition: 0.9s;
 -moz-transition: 0.9s;
 -o-transition: 0.9s;
 transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 position: relative;
}

/* hide back of pane during swap */
.front, .back, .front1, .back1{
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;

 position: absolute;
 top: 0;
 left: 0;
}

/* back, initially hidden pane */
.back {
 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
}

.back1
{
 transform: rotateY(180deg) rotate(180deg);
 -webkit-transform: rotateY(180deg) rotate(180deg);
 -moz-transform: rotateY(180deg) rotate(180deg);
 -o-transform: rotateY(180deg) rotate(180deg);
}

/* flip the pane when hovered */
.main-container1:hover .inner_container1, .main-container1.hover .inner_container1 {
 transform: rotateX(-180deg);
 -webkit-transform: rotateX(-180deg);
 -moz-transform: rotateX(-180deg);
 -o-transform: rotateX(-180deg);
}

.main-container1 .inner_container1 {
 transform-origin: 100% 157px; /* half of height */
 -webkit-transform-origin: 100% 157px; /* half of height */
 -moz-transform-origin: 100% 157px; /* half of height */
 -o-transform-origin: 100% 157px; /* half of height */
}

/* Setting height, width and perspective for main container */
.main-container2, .main-container3
{
 width: 200px;
 height: 200px;
 -webkit-perspective: 850px;
 -moz-perspective: 850px;
 -o-perspective: 850px;
 perspective: 850px;

}

/*  Setting the position and transition property for 3rd and 4th flip demo */
.inner_container2, .inner_container3
{
 margin: 0;
 width: 200px;
 height: 200px;
 position: absolute;

 -webkit-transition: -webkit-transform 1s;
 -moz-transition: -moz-transform 1s;
 -o-transition: -o-transform 1s;
 transition: transform 1s;

 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

/* Setting positionfor front and back side for 3rd and 4th animation */
.front2, .back2, .front3, .back3{
 width: 200px;
 height: 200px;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 position: absolute;
}
/* flip the pane when hovered demo 3 */
.back2
{
 transform: rotate3d(2,4,0,180deg);
 -webkit-transform: rotate3d(2,4,0,180deg);
 -moz-transform: rotate3d(2,4,0,180deg);
 -o-transform: rotate3d(2,4,0,180deg);
}
.main-container2:hover .inner_container2, .main-container2.hover .inner_container2 {
 transform: rotate3d(2,4,0,180deg);
 -webkit-transform: rotate3d(2,4,0,180deg);
 -moz-transform: rotate3d(2,4,0,180deg);
 -o-transform: rotate3d(2,4,0,180deg);
}

/* flip the pane when hovered demo 4 */
.back3
{
 transform:  rotate3d(4,2,0,180deg);
 -webkit-transform:  rotate3d(4,2,0,180deg);
 -moz-transform:  rotate3d(4,2,0,180deg);
 -o-transform:  rotate3d(4,2,0,180deg);
}
.main-container3:hover .inner_container3, .main-container3.hover .inner_container3 {
 transform:  rotate3d(4,2,0,180deg);
 -webkit-transform:  rotate3d(4,2,0,180deg);
 -moz-transform:  rotate3d(4,2,0,180deg);
 -o-transform:  rotate3d(4,2,0,180deg);
}
   
  

Please hover the images to view the flip effect.

Demo 1

Demo 2

Demo 3

Demo 4

You can download the demo here.

P.S. : This was just a quick glance over some of the cool effects that can be done using CSS Transformations. This example is not supported by IE, will update the post with the work around.