Windows Phone Tiles Using CSS and jQuery
Apr 11, 2013
Windows Phone’s tile design is a haunting beauty to me. I never knew a layout of neat square boxes can impress me that much. And so I tried to implement that tile design in web using CSS and jQuery. I have tried only the Tile Flip animation which can show two different information one at the front side and another at the back side of the tile.
First we are going to create the html content for the tiles to be created as shown in the below image. Each tile contains two divs front and back. Both can contain information to be shown. The following html code produces the desired arrangement of tiles.
<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>
<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>
The CSS takes care of size and alignment of the tiles. (Please download the source code and check). Here I would like to highlight the important part of CSS which creates the perspective view when the tile rotates.
.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 takes care of the Tile Flip with the following code. Here I have used Transit for animation which is a jQuery extension. It is really great for smooth animations and provides lots of ease techniques which is very much needed in our case as the normal simple ease will make the Tile Flip look like two pieces of animation.
$(document).ready(function () {
$(".back").hide();
$(".tile").mouseenter(function () {
$(this).children(".front").transit( {
"rotateX":"90deg"
},500,"easeInCirc",function () {
var back;
$(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 () {
var front;
$(this).hide();
front = $(this).siblings(".front");
front.css({
"rotateX" : "-90deg"
});
front.show();
front.transit({
"rotateX" : "0deg"
},500,"easeOutCirc");
});
});
});
Initially all the backs of tiles are hidden and rotateX is -90 deg . And fronts are visible and rotateX is 0 deg. All the tiles filp at mouseenter and flip again at mouseleave.
The above diagram explains the working of the function on mouseenter. mouseleave works in similar way.
This design makes use of CSS perspective property which is implemented only in latest versions of few browsers. I have tested it and /found working on Firefox 20.0 and Chrome 26.0. Better you have hardware graphics rendering ON for Chrome. If your browser doesn’t support perspective, still it should work in orthogonal view.