Modern UI (Metro) style tile in HTML 5?

Question

I would like to know if it's possible to recreate the tile system of modern UI from Windows 8 on a HTML page.

I already created this from this website. Here is the code

<div class="tile pos1-1 w1h1 techolive"></div>
<div class="tile pos1-2 w1h1 techblue"></div>
<div class="tile pos2-2 w1h1 techred"></div>
<div class="tilebanner" style="font-size: 20px !important;">
    <a class="tile pos2-3 w2h1 techdarkblue" href="...">
                    List of<br/>
                    Sessions
    </a>
</div>

Now i would like to add the same slide movement effect of modern UI. I guest I need javaScript to create that. Perhaps this feature or a similar feature is included in HTML 5 or CSS. Do you know where I can find a sample?

Solution 1

There is a plugin for jQuery called Metro JS. Maybe you can use this to create the tiles with jquery and javascript.

Solution 2

Anyone looking at this now should check out MetroUI - it follows a very similar methodology to Twitter Bootstrap and is very easy to use and produces really nice results.

It's also:

Developed with the advice of Microsoft to build the user interface

So you get something really true to Windows 8