Card Flip Effect with pure CSS3

Card Flip Effect

You will love CSS animations. CSS animations are fun. Here are some more CSS Experiments for you. We will create CSS Flip card effect. This is a 3D flipping card. 
 Here is the example and the explanation to the full tutorial:
 Make a div and name it as card. It has some basic styles like below. 
So we have our card. Just put a hover state and for hover state just transform the card and rotate on Y axis. Add a transition effect.It will make the animation smooth. Tell the card to preserve the 3D and for this we will use transform-style. It will give you the illusion.

Click to view the full tutorial

Originally published at

Like what you read? Give sonalie nanda a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.