Windows Phone的tile設計的美麗對我來說有余音繞梁的效果。我從來不知道優雅的方塊盒子布局能給我深刻的印象。因此我嘗試在web里用CSS和Jquery去實現這種tile設計。我已嘗試Tile Flip動畫效果，它能展示兩種不同的信息一個在tile的前端而另外一個就在后端。

首先我們要為tile創建和下面圖片的效果一樣的HTML的內容。每個tile包含了兩個分別在前后的div。他們都能包含要展示的信息。下面的html代碼生成所需的tile布局。

tile設計包含了CSS的類名

CSS Code復制內容到剪貼板

Internet?Explorer

1Tile?12Tile?23Tile?34Tile?4

Windows?Phone?Tiles?using?CSS?and?jQuery

This?is?a?wide?tile

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();

$(".tile").mouseenter(function()?{

$(this).children(".front").transit(?{

"rotateX":"90deg"

},500,"easeInCirc",function()?{

varback;

$(this).hide();

back?=?$(this).siblings(".back");

back.css({

"rotateX":"-90deg"

});

back.show();

back.transit(?{

"rotateX":"0deg"

},500,"easeOutCirc");

});

});

$(".tile").mouseleave(function()?{

$(this).children(".back").transit(?{

"rotateX":"90deg"

},500,"easeInCirc",function()?{

varfront;

$(this).hide();

front?=?$(this).siblings(".front");

front.css({

"rotateX":"-90deg"

});

front.show();

front.transit({

"rotateX":"0deg"

},500,"easeOutCirc");

});

});

});

一開始，所有的圖塊都是隱藏的，rotateX是90°，前面的部分是可以看到的，rotateX是0°。所有的圖塊在鼠標指針進入的時候翻過來，在鼠標指針出來的時候又翻回來。

上面的圖解釋了在鼠標指針進入時調用的函數這個過程是怎么進行的，鼠標指針出來的時候的工作原理和這個差不多。

這個設計使用的是在最新版本的瀏覽器才有的CSS 遠景屬性。我已經測試過它了，發現在火狐20.0和chrome26.0上可以運行。最好是你在chrome里有硬件圖像渲染。如果你的瀏覽器不支持遠景屬性的話，它在正交直線視圖上看起來還是有效的。

總結

以上是生活随笔為你收集整理的html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。