CSS Animated 3D Greeting Card
December 24th, 2012 — Foothill Ranch, CA
(Demos Require a Webkit Browser. Chrome is Recommended.)
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.
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.