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!
Let's make something great together!
If you'd like to discuss your next project with us, please feel free to give us a call on 01827 781 311 or press the "Start My Project" button to get in touch for a quick quote.