Ph: 847.562.5240

Render a 3D Object using CSS

I never knew I'd use geometry and trig math again, but the 3D rendering world makes me dust off that knowledge. Here's how to make a floating barrel:

A 3D object can be created in JavaScript using a small set of functions for creating primitive geometry. The simplest object that can be created is a plane, which is basically a <div> element. Planes can be added to assemblies, (a wrapper  <div> element) allowing the entire object to be rotated and moved as a single entity. A barrel or drum is simply a tube containing planes rotated around an axis, with a top plane and another for the bottom.

The result is this: