Skip to content

Instantly share code, notes, and snippets.

@nikolaiwarner

nikolaiwarner/css rotation and masking example

Created June 7, 2010 21:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nikolaiwarner/429232 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nikolaiwarner/429232 to your computer and use it in GitHub Desktop.
Download ZIP
css rotation and masking example
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment