CSS 3D card flip

Inspired on the cool Google+ card flip, here’s the breakdown.

The HTML

Plain and simple containers using DIVs. The main concept is to stack the .front and .back elements on their back.

Then when we hover on the first element we flip them both. We’ll use some cool CSS to hide the backface of the elements as well as transition for the transforms.

Enough talk, let’s code:

It can’t get any easier than that.

The CSS

Now, this part is interesting. Pay special attention to the following properties:

  • backface-visibility
  • transition
  • transform

As explained before we need to rotate the elements. The .back div is going to be rotated 180 degrees at the start, so it’ll be hidden. When we hover the container we’ll do the opposite.

Check out the comments inside the code and view the Demo afterwards:

View Demo

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*