Windows Metro tiles with Javascript and CSS3

Metro style is getting pretty trendy. One of most remarkable elements of windows 8 metro style is tiles. Tim Holman made a lovely script providing this tiles effect on web-pages. I liked the idea and improved the script code. It's mostly refactoring (code is fully rewritten), but there are some improvements:

Now you can specify which elements of DOM you want as tiles (selector query).
You can have the transition as on click event as well as on hover effect.
You can limit tilting directions up to the only one.

Though, one can say, this implementation has an inconvenience. Any element you want as tile must be of the following design: container (wrapper), which first child is meant for transformation (transition target). This separation makes sure we won't lose focus on the tile while it's being transformed.

Demo 1: Default behavior - element tilts when clicked. Almost the same as in the original script.

You can

put

anything you want

these

tiles

In order to run this you have use the following code.

window.TileJs({
    selector: "#demo1 .metro-tile"
});

Demo 2: On hover - element tilts when hovered. If we let the script tilting elements relative to the direction from where mouse enters it will fell too cheese. But we can make the script to tilt always to one side using parameter tiltOnly: "direction".

You can

put

anything you want

these

tiles

In order to run this you have use the following code.

window.TileJs({
    selector: "#demo2 .metro-tile",
    triggerEvent: "mouseover",
    tiltOnly: "top"
});

The code is open source on github