CSS3 Mosaic


Mosaic aims to be an image rotator. Many parameters can be instrumented from tile transition, to number of rows or columns or the transition formulae to change images.

Max rows
Max columns
Tile rotation: 2500ms
Tile delay: 50ms
Tile rotation style
Auto run

Images are (c) zimpenfish under license CC BY 2.0

This experiment will only work properly on Safari 5+ or Chrome/Chromium 11/12. Other browsers won't be able to show it properly due to the lack of CSS3 3D transformations and/or CSS3 transitions.

Use cursor keys to zoom/rotate the mosaic grid.

Mosaic will randomly divide the image into flying tiles. I've set the maximum possible values to be 12x12. Modify the rows and columns value to set up to 32x32 maximum tiles.