jQuery Image Rotate

In this tutorial we are going to rotate HTML image element by using jQuery. In previous tutorial we have seen about how to do background image animation in jQuery.

In this image rotation example we are using jQuery animate function. Using this function we are controlling the image transform property.

View DemoDownload

jquery-image-rotate

HTML Code with Rotate Buttons

This code shows the image element and list of HTML buttons to rotate the image.

<div>
<label>Rotate Image:</label>
<input type="button" class="btnRotate" value="90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="-90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
</div>
<div><img src="coffee.jpg" id="demo-image" /></div>

jQuery Rotate Function

This jQuery function will rotate the image element by changing its transform property.

function rotateImage(degree) {
	$('#demo-image').animate({  transform: degree }, {
    step: function(now,fx) {
        $(this).css({
            '-webkit-transform':'rotate('+now+'deg)', 
            '-moz-transform':'rotate('+now+'deg)',
            'transform':'rotate('+now+'deg)'
        });
    }
    });
}

View DemoDownload

This jQuery code tutorial was published on December 3, 2014.

↑ Back to Top