CSS Animated 3D Greeting Card
December 24th, 2012
(Demos Require a Webkit Browser. Chrome is Recommended.)
Download Editable Card Sprite (Adobe Fireworks)
My wife has crafted beautiful handmade Christmas cards for the last 2 years. We would love to send them to all of our family and friends, but the supplies are expensive and they require a lot of time to make. I've seen nice animations of greeting cards on sites like punchbowl.com, but they are usually done in Flash, and we all know the problems with Flash, right? So I set out to make my own CSS-animated version.
I wish I could say that I flew through this project, but it took me at least 20 hours to complete. When I began I had no experience with CSS transitions or animations. The most challenging part was keeping my frame of reference when thinking about the transformations, especially the top-inside of the card. Another big challenge was the layering of elements. I began by using z-index positioning, however that had problems with layers flickering during rotation. Instead of z-index, the better alternative seems to be to use the translateZ property.
The code works as intended in Google Chrome, but Safari seems to have an issue with the envelope flap showing through to the front during the flip-envelope transition. I don't know if this is an issue with my code or a rendering issue in Safari.
The current demo only uses CSS transitions to perform the animation, with the help of some JavaScript click events to trigger the animations. There are lots of variations that can be done with this, like using CSS keyframes to perform the entire animation sequence. I have done my best to make the example as stripped-down and semantic as possible. I am also providing the source artwork as an editable Adobe Fireworks file.
My wish is that you will find this a useful starting place for your own application, so please feel free to adapt this for your projects. If you do, please send me a link, I'd love to see it.
Media: