Beercamp: A pop-up book styled site that pushes CSS 3D to its limits

Beercamp, a yearly event for designers and developers, has become quite the playground for front-end experimentation. For 2012, Tom Giannattasio of nclud led the creation of a site that pushes SVG and CSS 3D transforms to the limits, and in all honestly, it’s one of the first successful commercial applications of 3D transforms I’ve seen.

Note, before we continue, note that this project was created only for the most modern of browsers in an effort to explore what is possible. This is not designed for the average consumer, but offers us a preview at the potential CSS 3D transforms has, even when lined up next to WebGL. It really shows off the potential of an interactive Web post Flash.

As you can see in the pictures below, Beercamp’s impressive site was designed as a pop-up book. Giannattasio talks about his inspiration:

Before I started building the Beercamp website, I did some “research” into what makes pop-up books so much fun. As I flipped through the paper-crafted version of Dr. Seuss’ Oh, the Places You’ll Go, I found myself inspecting each page from multiple angles. Seeing how things looked from different perspectives was fun, and interacting with the environment was engaging.

If you’re interested in diving deeper into exactly how the site was built, check out this in-depth look. For more on 3D and CSS, it’s worth it to take a peek at WC3’s working draft.

Giannattasio rightly says that “CSS 3D has yet to hit a tipping point.” It’s only a matter of time before browsers improve support, but at the moment it has yet to receive enough attention for it to be a practical technology.

➤ Beercamp

Check out our full Design and Dev channel for more inspiration!