使用JS配合CSS实现Windows Phone中的磁贴效果

Windows Phone的tile设计的美丽对我来说有余音绕梁的效果。我从来不知道优雅的方块盒子布局能给我深刻的印象。因此我尝试在web里用CSS和Jquery去实现这种tile设计。我已尝试Tile Flip动画效果，它能展示两种不同的信息一个在tile的前端而另外一个就在后端。 

Demo Download

首先我们要为tile创建和下面图片的效果一样的HTML的内容。每个tile包含了两个分别在前后的div。他们都能包含要展示的信息。下面的html代码生成所需的tile布局。

tile设计包含了CSS的类名

CSS Code复制内容到剪贴板

<div class="container">   
    <div class="tile tile-normal">   
        <div class="front">   
            <img class="icon" src="ie.PNG" />   
        </div>   
       <div class="back">   
            Internet Explorer   
       </div>   
    </div>   
    <div class="container-small">   
        <div class="tile tile-small">   
            <div class="front">1</div>   
            <div class="back">Tile 1</div>   
        </div>   
        <div class="tile tile-small">   
            <div class="front">2</div>   
            <div class="back">Tile 2</div>   
        </div>   
        <div class="tile tile-small">   
            <div class="front">3</div>