Kinect tile 3D Effect with CSS3 and jQuery

I've used my Kinect for 1 year now, and one thing I like is the Kinect dashboard that is reacting in 3D with my hand; you know the tiles...
So I tried; and succeeded!; to mimic the same 3d effect on html elements with some CSS3 and jQuery, and I made a jQuery plugin so it’s much more easier for you to add this effect on your website.

Because this plugin is awesome, it work only on webkit browsers (Google Chrome & Safari) because of the CSS3's rotate3d function.

First step

To use this little plugin, first of all you just need to add jquery and the tile plugin to your html page:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Tile</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.tile.min.js" type="text/javascript"></script>
	
</head>
<body>
	
</body>
</html>

Second step

Now we can call the plugin on an element in the page. So in the body we add a div with some style:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Tile</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.tile.min.js" type="text/javascript"></script>
	
	<style>
		body {
			background-color: #838383;
		}
		#tile {
			background-color: #45a8d3;
			box-shadow: 0px 0px 5px #444;
			height: 200px;
			width: 200px;
		}
	</style>
	
</head>
<body>
	<div id="tile"></div>
</body>
</html>

And in the head we call the plugin:

<script type="text/javascript">
		$(function(){
		
			$("#tile").tile();
		
		});
</script>

And BAMM! you get something like that:

Configuration

You can even personalize some settings like the perspective, the degree and the inversion by doing this:

$("#tile").tile({
	perspective: 400,
	degree: 10,
	inverse: true
});

Source

You can find source files on gitHub here