CSS3 Windows Phone 7 UI

dabblet.css

/**
 * CSS3 Windows Phone 7 UI
 */
* { box-sizing: border-box; }
body {
	margin: 0;
	padding: 40px 10px;
	background: black;
	color: white;
	font: 400 0.9em sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-perspective: 1200px;
	-webkit-perspective-origin-y: 300px;
	-moz-perspective: 1200px;
	-moz-perspective-origin-y: 300px;
}
h1, h2 {
	font-weight: 100;
}
.tile {
	float: left;
	width: 120px;
	height: 120px;
	margin: 0 10px 10px 0;
	padding: 97px 0 0 8px;
	background: #00aaad;
	-webkit-transform: rotateY(0deg);
	-webkit-transform-origin: -10px;
	-moz-transform: rotateY(0deg);
	-moz-transform-origin: -10px;		
}
.tile:nth-child(2n+1) {
	clear: left;
}

.tile:active {
	-webkit-transform: rotateY(10deg);
	-webkit-transition: linear .1s;
	-moz-transform: rotateY(10deg);
	-moz-transition: linear .1s;	
}
.tile:nth-child(odd) {
	-webkit-animation: 1s flip-odd ease;
	-moz-animation: 1s flip-odd ease;
}
.tile:nth-child(even) {
	-webkit-animation: 1.3s flip-even ease;
	-moz-animation: 1.3s flip-even ease;
}
@-webkit-keyframes flip-odd {
	0% {
		-webkit-transform-origin: -10px;		
		-webkit-transform: rotateY(-90deg);	
	}
}
@-webkit-keyframes flip-even {
	0% {
		-webkit-transform-origin: -150px;		
		-webkit-transform: rotateY(-90deg);
	}
}
@-moz-keyframes flip-odd {
	0% {
		-moz-transform-origin: -10px;		
		-moz-transform: rotateY(-90deg);	
	}
}

@-moz-keyframes flip-even {
	0% {
		-moz-transform-origin: -150px;		
		-moz-transform: rotateY(-90deg);	
	}
}

dabblet.html

<h1>CSS3 Windows Phone 7 Tiles</h1>
<h2>CSS Animation runs once</h2>

<div class="tile">calls</div>

<div class="tile">messages</div>

<div class="tile">contacts</div>

<div class="tile">games</div>

<div class="tile">weather</div>

<div class="tile">stocks</div>

<div class="tile">settings</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}