jQuery Image Rotate

In this tutorial, we are going to rotate HTML image element by using jQuery. In the previous tutorial, we have seen How Can I Generate a Random Alphanumeric String in PHP?.

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

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="image-rotate.png" 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)'
        });
    }
    });
}

Full Code :

<html>
<head>
<title>jQuery Image Rotate</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script>
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)'
        });
    }
    });
}
</script>
<style>
#demo-image{padding:25px 10px;}
.btnRotate {padding: 5px 10px;background-color:#FF0033;border: 0;color: #FFF;cursor: pointer;}
</style>
</head>
<body>
<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="image-rotate.png" id="demo-image" /></div>
</body>
</html>




How to Make Online Photo Editing Effects like Blur Image, Sepia, Vintage

Please follow and like us:

Add a Comment