Responsive CSS Flip Animations

One way to add user experience to your website is by adding animation with graceful transition. This article discusses simple responsive flip animation using CSS (no JavaScript) to display the best movies in 2013.




This can run on different devices with different viewports. Below are screen shots on some devices.

320 x 480

800 x 1280

Let's examine the codes

First let us build the basic html and display the first card :



There are three things that must be considered when creating flip animation: the card, the front, and then the back. These 3 should be in house in a panel. This concept is actually conceived from the card theory.

Bootstrap 3.1 is included to support responsiveness to different viewports. So that the container, row, img-responsive, col-md-2 (6 columns in medium devices), col-sm-2 (6 columns in small devices), col-xs-6 (2 columns in extra small devices) are bootstrap classes. 

You might noticed that there is an image on the back div and not set as a background. Well, in this example the front is pure image so we must use image at the back to maintain the ratio when browsing to different devices.

The next step is to create the basic CSS that will handle the animation. The cross browser compatibility was excluded so that we can easily walk through this.



The CSS Classes:

Class	Description
flip_panel	This is use to in house the whole card.
card	The properties of the card such as the transition, width and height. Since it is responsive, the width and height should be 100% so that it will follow the img-responsive properties.
front	The front view of the card. What is the z-index for? It specifies the stack order of the element.
back	The back of the card. The position property should be absolute, the top and left properties should be set to 0px since they have same position with the front card. Initially it was rotated to 180 degrees horizontally. Note: Don't set these properties in the card class because it will use the row class as a point of reference for absolute positioning.
flip_panel:hover .front	This is the part that rotates the front object to 180 degrees horizontally. By just changing the rotateY to rotateX will flip vertically.
flip_panel:hover .back	This will the return the back object to normal rotation.
TextOnTop	Since we can't use background images in the front card, we are going to position the elements in this class to top:0, left:0, and set the position to absolute.

The Finishing Touches

Now let's set the compatibility with different browsers(-webkit, -ms, -moz,-o). Replace the css with the snippet below:


We can add more cards applying the first template to the rest of the cards:



That's it and thank you for viewing. Hope this will help you add more user experience and responsiveness to your web site.

The complete code can be downloaded @ here.