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!
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: