I need to rotate an image with javascript in 90-degree intervals. I have tried a few libraries like jQuery rotate and Raphaël, but they have the same problem - The image is
CSS can be applied and you will have to set transform-origin
correctly to get the applied transformation in the way you want
See the fiddle:
http://jsfiddle.net/OMS_/gkrsz/
Main code:
/* assuming that the image's height is 70px */
img.rotated {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform-origin: 35px 35px;
-webkit-transform-origin: 35px 35px;
-moz-transform-origin: 35px 35px;
-ms-transform-origin: 35px 35px;
}
jQuery and JS:
$(img)
.css('transform-origin-x', imgWidth / 2)
.css('transform-origin-y', imgHeight / 2);
// By calculating the height and width of the image in the load function
// $(img).css('transform-origin', (imgWidth / 2) + ' ' + (imgHeight / 2) );
Logic:
Divide the image's height by 2. The transform-x
and transform-y
values should be this value
Link:
transform-origin at CSS | MDN
Hope this can help you!
<input type="button" id="left" value="left" />
<input type="button" id="right" value="right" />
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<script>
var angle = 0;
$('#left').on('click', function () {
angle -= 90;
$("#image").rotate(angle);
});
$('#right').on('click', function () {
angle += 90;
$("#image").rotate(angle);
});
</script>
Try it
Based on Anuga answer I have extended it to multiple images.
Keep track of the rotation angle of the image as an attribute of the image.
function rotate(image) {
let rotateAngle = Number(image.getAttribute("rotangle")) + 90;
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
image.setAttribute("rotangle", "" + rotateAngle);
}
.rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
Edit
Removed the modulo, looks strange.