Rotate image with javascript

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 rotated around its center. I have a bunch of content on all sides of the image, and if the image isn't perfectly square, parts of it will end up on top of that content. I want the image to stay inside its parent div, which has max-with and max-height set.

Using jQuery rotate like this ():

var angle = 0; $('#button').on('click', function() { angle += 90; $("#image").rotate(angle); }); 

Results in this:

And this is the result i would like instead:

Anyone have an idea on how to accomplish this?

9 Answers

You use a combination of CSS's transform (with vendor prefixes as necessary) and transform-origin, like this: (also on jsFiddle)

var angle = 0, img = document.getElementById('container'); document.getElementById('button').onclick = function() { angle = (angle + 90) % 360; img.className = "rotate" + angle; }

#container { width: 820px; height: 100px; overflow: hidden; } #container.rotate90, #container.rotate270 { width: 100px; height: 820px } #image { transform-origin: top left; /* IE 10+, Firefox, etc. */ -webkit-transform-origin: top left; /* Chrome */ -ms-transform-origin: top left; /* IE 9 */ } #container.rotate90 #image { transform: rotate(90deg) translateY(-100%); -webkit-transform: rotate(90deg) translateY(-100%); -ms-transform: rotate(90deg) translateY(-100%); } #container.rotate180 #image { transform: rotate(180deg) translate(-100%, -100%); -webkit-transform: rotate(180deg) translate(-100%, -100%); -ms-transform: rotate(180deg) translateX(-100%, -100%); } #container.rotate270 #image { transform: rotate(270deg) translateX(-100%); -webkit-transform: rotate(270deg) translateX(-100%); -ms-transform: rotate(270deg) translateX(-100%); }

<button>Click me!</button> <div> <img src="" /> </div>

var angle = 0; $('#button').on('click', function() { angle += 90; $('#image').css('transform','rotate(' + angle + 'deg)'); }); 

Try this code.

No need for jQuery and lot's of CSS anymore (Note that some browsers need extra CSS)

Kind of what @Abinthaha posted, but pure JS, without the need of jQuery.

let rotateAngle = 90; function rotate(image) { image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)"); rotateAngle = rotateAngle + 90; }

#rotater { transition: all 0.3s ease; border: 0.0625em solid black; border-radius: 3.75em; }

<img onclick="rotate(this)" src=""/>

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:

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" value="left" /> <input type="button" value="right" /> <img src=""> <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

i have seen your running code .There is one line correction in your code.

Write:

$("#wrapper").rotate(angle); 

instead of:

$("#image").rotate(angle); 

and you will get your desired output,hope this is what you want.

I think this will work.

 document.getElementById('#image').style.transform = "rotate(90deg)"; 

Hope this helps. It's work with me.

You can always apply CCS class with rotate property -

To keep rotated image within your div dimensions you need to adjust CSS as well, there is no needs to use JavaScript except of adding class.

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 onclick="rotate(this)" src=""/> <img onclick="rotate(this)" src=""/> <img onclick="rotate(this)" src=""/>

Edit

Removed the modulo, looks strange.