CSS animation+CSS transform+SVG powered by Firefox = Kaleidoscope

kaleidoscope result
The amazing power of web technologies like CSS, HTML and SVG comes when you mix them all together! The arrival of the new mozilla specific CSS property -moz-element totally unleashed the power of CSS animation/transition when it comes to doing graphical effects. And I'm pretty sure that we may go even more futher by using others standards like HTML and SVG ...
In order to show you how simple and powerfull these technologies mix can be, I've add two extra features on top of this kaleidoscope:

I find these two features quite powerfull, and what's totally awesome is how simple they are: only 3 lines of HTML in the first case, tens lines of javascript in the second one!

Kaleidoscope demo

Need Firefox 4 Beta 6 or a nightly!

Finally, you may look at this tutorial that explain point by point how to achieve a Kaleidoscope by mixing -moz-element+SVG+CSS animations and transform:

Kaleidoscope tutorial