Create a Pure CSS3 Flipping Animation

The Demo

With CSS3 you can create anything from an elegant fade into an amazing special effect. One CSS3 effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you how to create the effect in a simple manner without lots of CSS. The following code works in Firefox, Chrome, Opera, and IE10+.

HOVER OVER ME!

YAY!

The HTML

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

The CSS

Next up, the CSS! I can't believe the little amount of CSS needed to make the animation function.

/* OUR WRAPPER */ .flip_container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; perspective: 1000; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; } /* FLIP BACK */ .flip_container:hover .flip_back, .flip-container.hover .flip_back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } /* FLIP FRONT */ .flip_container:hover .flip_front, .flip-container.hover .flip_front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .flip_container, .flip_front, .flip_back { display:block; } /* TRANSITION SPEED */ .flip_effect { transition: 0.6s; transform-style: preserve-3d; position: relative; } .flip_front, .flip_back { display: block; width:100%; height:264px; padding:50px 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -o-transition: 0.6s; -o-transform-style: preserve-3d; -ms-transition: 0.6s; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } /* FRONT */ .flip_front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); } /* BACK */ .flip_back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); padding:15px; }

Stay tuned for future updates!