rotation img

by ostapische

JavaScript

var Rotation = 0, forward = true, interval;
function Rotate() {
    interval = setInterval(function() {
        var img = document.getElementById( "Test" );
        if ( forward ) {
            Rotation = Rotation + 1;
            img.style.transform = "rotate("+Rotation+"deg)";
            img.style.msTransform = "rotate("+Rotation+"deg)";
            img.style.webkitTransform = "rotate("+Rotation+"deg)";
            if ( Rotation > 60 ) { forward = false; }
        } else if ( Rotation > 0 ) {
            Rotation = Rotation -1;
            img.style.transform = "rotate("+Rotation+"deg)";
            img.style.msTransform = "rotate("+Rotation+"deg)";
            img.style.webkitTransform = "rotate("+Rotation+"deg)";  
        } else {
            forward = true;
            clearInterval( interval );
        }
        console.log( Rotation );
    }, 1);
}
window.addEventListener( "load", function( windowLoadE ) {
    var img = document.createElement( "img" );
    img.id = "Test";
    img.addEventListener( "click", Rotate );// load
    document.body.appendChild( img );
    img.src = "https://www.google.ru/images/icons/product/chrome-48.png";
} );