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 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...
Related Post