Kaleidoscope

If you're using a modern web-browser you'll see 8 different regions all moving independently, other browsers will only see 4. This is because the 4 diagonal divs are rotated into place via CSS3 transforms. All of the regions are absolutely positioned and the backgrounds are animated in a given direction based on the movement & position of the mouse on the screen.

While this might look interesting, it has no practical applications except for maybe inducing seizures. It's another case of webdev masturbation; quick, unpolished and purely for pleasure. I seem to end up with a lot of 'I wonder if I could...' ideas that seem cool but don't amount to much else. But, hey, if I don't get to play with crazy CSS much in client work it's got to come out sometime. At least now I'm more familiar with animating background images, which I had never done before.

I do wonder how far you could take a kaleidoscope like this. If you could rotate the background image as well, the effect could be hugely improved although my browser is already strained after a few minutes of running this. Yep, quick and dirty with no thought towards optimization or memory consequences.

Feel free to take a look under the hood. The CSS is in the head of index.html and the javascript is in jpg.kaleidoscope.js.