Creating CSS flip cards is not only an incredible space saver on websites but they also look cool and can lead to greater engagement and user experience. They are also easy to create.

The Demo

Below is a snippet of the flipping animation effect that we will be making.

See the Pen CSS Flipping Animation by Davison Pro (@davisonpro) on CodePen.


The HTML structure to create the two-sided flipping animation effect is as you would expect it to be:

There are two content panes, “front” and “back”, as you would expect, but also two containing elements with very specific roles explained by their CSS. 


Here’s a rough overview of the process:

Think of it like a sandwich with two slices of bread. One at the top and one at the bottom. Without preserved 3d we only flip the top slice back and forth. With preserved 3d we flip the entire sandwich.

That’s really all there is to it! Put this simple structure into place and then style each side as you’d like!

Achieving the CSS flipping effect is quite simple. Give it a shot and see how it works and you can also use this effect on your website gallery. If you have any questions leave please ask in the comments section below. Happy coding!