CSS3 Tiler

TwitterGoogle+FacebookShare
Max rows
12
Max columns
12
Tile rotation: 2500ms
Tile delay: 50ms
Second Axis rotation
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 tiler grid.

Set 'Second Axis Rotation' to 'none' to make tiler behave exactly as my other experiment CSS3 Mosaic.

Tiler 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.

Here's a video of CSS3 Tile just in case your browser can't play it properly.

  • Anonymous

    wow this is awesome, and there I was looking for something like this and decided to create on my own!
    So cool!

    • Anonymous

      Thanks matey.
      You built a nice portal 2 transition demo.
      keep up the good work.

  • Ricardo Sanchez

    Justo cuando pensaba estudiar CSS3D excellente!

    Gracias por el post y codigo