Rotate on move

Glyph roation based on mouse

by James Doyle

HTML

<div id="glyph"></div>

CSS

#glyph {
    margin: 30px;
    height: 50px;
    width: 50px;
    -webkit-transform-origin: bottom right;
    background: url(http://dl.dropbox.com/u/6913105/minima-glyph.png) no-repeat;
}

JavaScript

var x = document.getElementById('glyph');
x.onmouseover = function() {
    x.style.WebkitTransition = "all 1s";
    x.style.WebkitTransform = "rotate(360deg)";
    x.onmouseout = setTimeout(function() {
        x.style.WebkitTransition = "none";
        x.style.WebkitTransform = "rotate(0deg)";
    },1100);
}