JQuery Rotate Image Example

Hi friends, in this tutorial we will learn how to rotate an image using jquery, this tutorial will give you a simple example to rotate 360,180 and 90 angle image from jquery.

In this picture revolution case, we are utilizing jQuery energize work. Utilizing this work we are controlling the picture change property.

there are a few plugin accessible for pivot picture but i will propose you utilizing jquery energize and utilizing CSS3 change property. you would like to fair give value with deg as property. it'll make basic and customize.

in this example we create 3 button and click this buton rotate image so we create very simple example just check bellow code.

Example
<!DOCTYPE html>
<html>
<head>
	<title>JQuery Rotate Image Example - phpicoder.com</title>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<br><br><br><br>
<img src="https://www.phpicoder.com/public/FruntedTheme/images/phpicoder.png" width="200px" id="phpicoder_logo">

<button id="degrees90">Rotate image 90 degrees</button>
<button id="degrees180">Rotate image 180 degrees</button>
<button id="degrees360">Rotate image 360 degrees</button>

<script type="text/javascript">
var tmpAnimation = 0;

// 90 Degrees Rotate
$("body").on("click", "#degrees90", function (event) {
	var element = $("#phpicoder_logo");
	tmpAnimation = tmpAnimation + 90;
	$({degrees: tmpAnimation - 90}).animate({degrees: tmpAnimation}, {
		duration: 2000,
		step: function(now) {
			element.css({ transform: 'rotate(' + now + 'deg)' });
		}
	});
});

// 180 Degrees Rotate
$("body").on("click", "#degrees180", function (event) {
	var element = $("#phpicoder_logo");
	tmpAnimation = tmpAnimation + 180;
	$({degrees: tmpAnimation - 180}).animate({degrees: tmpAnimation}, {
		duration: 2000,
		step: function(now) {
			element.css({ transform: 'rotate(' + now + 'deg)' });
		}
	});
});

// 360 Degrees Rotate
$("body").on("click", "#degrees360", function (event) {
	var element = $("#phpicoder_logo");
	tmpAnimation = tmpAnimation + 360;
	$({degrees: tmpAnimation - 360}).animate({degrees: tmpAnimation}, {
		duration: 2000,
		step: function(now) {
			element.css({ transform: 'rotate(' + now + 'deg)' });
		}
	});
});
</script>
</body>
</html>

I hope this tutorial help for you...