Dimensional Insight Logo Animation

Here's a little web animation I made.  It's based on the logo of the company I work for, Dimensional Insight:

Truly, this shape evokes "business intelligence".

Don't tell anyone but sometimes we refer to it as "the Q*Bert logo".  The main elements of it are tileable and I took that to its natural conclusion, imagining an infinite wall of isometric madness.  I thought it would be neat if the little diamond-shapes unfolded to create the pattern.

It's like this, but more animated.

The hardest part (and the least apparent in the final product) was getting the 3D transforms right for the folding of each little parallelogram.  There were also difficulties in getting CSS transitions to start exactly when I wanted.  Other than that, there are the usual cross-browser issues: Firefox and Chrome disagree about things like 'letter-spacing', and Internet Explorer simply doesn't seem to support the 3D transforms at all (specifically, 3D CSS transforms on G elements within the SVG).

So, if you're using Internet Explorer, sorry (not sorry) it won't work for you.  But for everyone else:

Dimensional Insight Logo Animation