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

            <div class="back">Tile 3</div>   
        </div>   
        <div class="tile tile-small">   
            <div class="front">4</div>   
            <div class="back">Tile 4</div>   
        </div>   
    </div>   
    <div class="tile tile-wide">   
        <div class="front">   
           Windows Phone Tiles using CSS and jQuery   
        </div>   
        <div class="back">   
           This is a wide tile   
        </div>   
    </div>   
</div>  

CSS关心的是tile的大小和对齐。（请下载源代码来查看）。这里我要对CSS重要部分进行高亮处理，这部分在tile旋转的时候会创建透明师视图。 

CSS Code复制内容到剪贴板

.tile {   
    float:left;   
    font-family: ‘Roboto’, sans-serif;   
    font-size:20px;   
    margin-left:2px;   
    margin-top:2px;   
        
    -moz-perspective:500px;   
    -webkit-perspective:500px;   
    -o-perspective:500px;   
    -ms-perspective:500px;   
    perspective:500px;   
}   

下面的JQuery代码关系Tile Flip。这里我为动画使用了 Transit，它是JQuery的一个扩展。它确实是对平滑动画有好处，同时提供大量在我们这种情况下非常需要的易用的技术，这普通易用的技术能让Tile Flip看起来想两块动画。

JavaScript Code复制内容到剪贴板

$(document).ready(function () {   
        
    $(".back").hide();