Techno Barje

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:

  • The first one, use a video instead of an image: Video Kaleidoscope
  • The second one allow you to specify a custom image by select or drag’n drop: Custom image

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