return to index

CSS 3D Business Card

Prior to the current iteration of my website, I had a simple 'digital business-card' front page. The skeumorphic-cards theme lives on in my current site; although with more correct HTML and without flashy flipping effects.

Born out of an experiment in making a realistic-looking postcard with CSS 3D transforms (and without Javascript), I spent a fair amount of time tweaking the CSS - its not just a simple 3d flip; the gradients, edges, and debossed shadows of the text transition to mimic how light would hit the card.

The HTML behind the card is an unfortunately non-semantic use of the <checkbox> element and <label> to enable clicking anywhere on the card to flip to the other side. The CSS was hand-written and all units were originally in px, which were converted without modification straight to rem to allow the demo to scale down for small screens.

See the live effect below - unfortunately CSS 3d-transforms require hardware acceleration, so the effect does not work on some mobile browsers.