I added Windows Phone style tiles to my site (and also Dust, my upcoming theme – more about that later) over the weekend. You may have noticed, if you use a browser which supports CSS3 3D Transforms (i.e. Aurora/Firefox 10, Chrome, IE10, Safari 5).

For the benefit of those who don’t have such a browser, here’s a video:

The basic idea was to emulate the flipping tiles present in Windows Phone. One, because they look cool, and two, it’s a way of displaying extra information in the same amount of screen space. This article by David DeSandro was extremely helpful (particularly the card flip example..!).

My tiles use a custom loop to find the posts desired, and use their featured images.

<ul>
<?php $loop = new WP_Query( array( 'post_type' => 'kko_work', 'posts_per_page' => 6, 'tag' => 'featured' ) ); ?>
<?php $num = 1; while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li>
<div>
<a href="<?php the_permalink() ?>"> </a>
<h1><?php the_title(); ?></h1>
</div>
<div>
<a href="<?php the_permalink() ?>"><?php if (has_post_thumbnail()) the_post_thumbnail();?></a>
</div>
</li>
<?php $num++ ; endwhile; ?>
</ul>

And here’s the CSS; the important parts are in bold. I’m sure I’ll be revisiting this in future to change the browser specific tags.

.tile {
float:left;
width: 180px;
height: 180px;
margin: 10px;
position: relative;
    -webkit-perspective: 800;
    -moz-perspective: 800;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transform-style: preserve-3d;
    -moz-transition: -moz-transform 0.5s;
}

.tile img { margin: 0; }

.tile div {
display: block;
position: absolute;
width: 100%;
height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.tile .back {
overflow: hidden;
  -moz-transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
}

.tile.flipped {
  -webkit-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
}

.tile .front .linkfill {
position: absolute;
display: block;
width: 180px;
height: 180px;
z-index: 5;
}

They’re designed to flip every 4-12 seconds; this is done using jQuery to toggle the .flipped class on a tile. Here’s the jQuery:

function flip3d(obj) {
obj.toggleClass('flipped');
var    disp = Math.floor(Math.random()*8000);
setTimeout(function() {
flip3d(obj);
}, 4000 + disp);
}

jQuery(document).ready(function($){
for (var i=1; i<=$(‘.worktiles’).children().length; i++) {
_name = ‘._t’+i;
flip3d($(_name));
}
});