nikolaiwarner/css rotation and masking example

## css rotation and masking example
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
    google.load("jquery", "1.4.2");
	</script>

<style>

body {
  background-image: url(http://nwarner.com/website/website2004/site_images/index_images/stripe1.png)
}


.mask {
-webkit-mask-image: url(http://nwarner.com/projects/dinosaurs/sb2_talking.gif);
-webkit-mask-position-x: 50%;
-webkit-mask-position-y: 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
}


.shoes {
background-image: url(http://nwarner.com/website/images/01242010.jpg);
width: 330px;
height: 328px;
float: left;
}

</style>

</head>
<body>
<div class="mask shoes ">
  nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai
<script>


var deg = 0;
var t = 5000

$(document).ready(function() {

  setInterval(
    function () {
      deg = deg + 180;
      $(".shoes").css({"-webkit-transform" : "rotate("+deg+"deg)", "-webkit-transition" : "-webkit-transform "+t+" linear"});
    },
    t
  );

});

</script>
</body>
</html>
	<html>
	<head>
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
	google.load("jquery", "1.4.2");
	</script>

	<style>

	body {
	background-image: url(http://nwarner.com/website/website2004/site_images/index_images/stripe1.png)
	}


	.mask {
	-webkit-mask-image: url(http://nwarner.com/projects/dinosaurs/sb2_talking.gif);
	-webkit-mask-position-x: 50%;
	-webkit-mask-position-y: 50%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	}



	.shoes {
	background-image: url(http://nwarner.com/website/images/01242010.jpg);
	width: 330px;
	height: 328px;
	float: left;
	}

	</style>

	</head>
	<body>
	<div class="mask shoes ">
	nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai nikolai
	<script>


	var deg = 0;
	var t = 5000

	$(document).ready(function() {

	setInterval(
	function () {
	deg = deg + 180;
	$(".shoes").css({"-webkit-transform" : "rotate("+deg+"deg)", "-webkit-transition" : "-webkit-transform "+t+" linear"});
	},
	t
	);

	});

	</script>
	</body>
	</html>