JS实现当鼠标移动到图片上时，时图片旋转

<div id="container" style="width:500px;height:400px;position:relative;margin:0 auto">
    <div id="demo">
        <img onmouseover="xuanzhuan()" src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="" height="" />
    </div>
</div>
<script type="text/javascript">
    var canTransition = function () {
        var el = document.createElement('foo');
        el.style.cssText = '-webkit-transition: all .5s linear;';
        return !!el.style.webkitTransitionProperty;
    } ();
    var o = document.getElementById('demo');
    function rotationImg() {
        if (document.all) {
            var i = , j = , vx = , vy = , exp =  / ;
            function run(angle) {
                j++;
                vx = Math.cos(angle * Math.PI / ) * j * exp;
                vy = Math.sin(angle * Math.PI / ) * j * exp;
                with (o.filters.item()) {
                    M11 = M22 = vx; M12 = -(M21 = vy); M22 = vx;
                }
                o.style.top = ( - o.offsetHeight) /  + 'px';
                o.style.left = ( - o.offsetWidth) /  + 'px';
            }
            function doRotation() {
                o.onfilterchange = doRotation;
                i += ;
                if (i > ) {
                    i = ;
                    o.onfilterchange = null;
                }
                run(i);
            }
            doRotation();
        } else {
            if (canTransition) {
                o.style.webkitTransition = '-webkit-transform 1s ease-in';
                o.style.webkitTransform = 'rotate(360deg)';
            }
        }
    }
     function xuanzhuan () {
        rotationImg();
        o.onclick = function () {
            rotationImg();
        }
    }
</script>