Beercamp: An Experiment With CSS 3D

Tom Giannattasio had the pleasure of organizing this year’s Beercamp website - this is a party for designers and developers. It’s also a playground for front-end experimentation. So this year experiment: a 3D pop-up book á la Dr. Seuss. The website was a test to see how far SVG and CSS 3D transforms could be pushed. He learned a lot in the process and wanted to share some of the techniques that he found helpful when working in 3D space.

Before we jump in, please note that explaining everything about the website without boring you to death would be damn near impossible. For your sake and his, Tom Giannattasio will provide just brief takeaways. As you skim through the code snippets, be aware that jQuery is being used and that a lot of code has been removed for simplicity (including browser prefixes).