CSS3 transitions: flip-card effect

Written by | October 23, 2013 | Posted in Process

CSS3 transitions are a great way to add some flashy effects to your website without bogging down the speed of the site with jQuery. Don’t get me wrong, I love me some jQuery, but I’m so happy that CSS3 transitions have come along to take some of the load off.

In a tiny little nutshell, the difference is that jQuery animations use the computer’s hardware, while CSS3 transitions and animations use the browser’s rendering engine. This is one of the reasons that jQuery animations work on some browsers that don’t support CSS3 transitions *cough cough, IE*.

Sometimes, CSS3 transitions even turn out to be way better at something than jQuery. The flip-card effect is one of these times. I worked for hours (don’t tell my boss!) to get this effect just right. I tried various jQuery plugins, writing my own jQuery function, and eventually settled on the perfect simple solution: a CSS3 transition using rotateY(180) and backface-visiblity.

Check out the people section on our about page to see this effect in all of its glory.

Or, see the fiddle below for the code in its most simple form:

Basically, what is happening here is this:

  • We are creating 2 sides of the card: front and back. They are both positioned absolute so they overlap each other, but the back side of the card is initally rotated 180 degrees.
  • We then use backface-visibility: hidden to ensure that the front side is only shown when not hovering, and the back is only shown when hovering.
  • The real meat of this effect is the transform-style: preseve-3d and transition: all .3s linear on the inner div.
  • The catch is that you have to make sure to add the transorm: rotateY(180) on the inner div when hovering over the parent container. This ensures that the mouse is always over the container when the transformation is happening. Otherwise you’ll have a really ugly flicker thing happen and it won’t be smooth at all (unless your mouse is magically in the center of the div the whole time).