Rotate image with javascript

Question

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 (http://jsfiddle.net/s6zSn/1073/):

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

Results in this:

How jQuery rotate works

And this is the result i would like instead:

How I would like it to work

Anyone have an idea on how to accomplish this?

Use CSS transforms to rotate the entire container around whatever point you like. — Blazemonger
– Blazemonger, Commented May 28, 2013 at 14:15
How to rotate an object back and forth around a specific point — jantimon
– jantimon, Commented May 28, 2013 at 14:27

Jeromy French · Accepted Answer · 2016-05-10 16:39:57Z

74

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 id="button">Click me!</button>
<div id="container">
  <img src="https://i.sstatic.net/zbLrE.png" id="image" />
</div>

edited May 10, 2016 at 16:39

Jeromy French

12.1k19 gold badges79 silver badges136 bronze badges

answered May 28, 2013 at 14:22

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mqchen Over a year ago

Add filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); for IE8 and IE7 support. rotation=1 for 90 deg, 2 for 180 deg, 3 for 270 deg.

Niet the Dark Absol Over a year ago

Note that you should really apply this to the image container, if you want the border to work right.

Om Shankar Over a year ago

Nopes ! this transform brings OP to the same problem. The transform is applied but not in the way OP wants

Blazemonger Over a year ago

@OmShankar I think it still gives OP enough to go on.

TheQ Over a year ago

This is almost working, however take a look that this: jsfiddle.net/bhN6e. I would like the text below the image to stay below the image, even after rotation. As it is right now, the image ends up on top of the text.

|

Harsha Venkataramu · Accepted Answer · 2013-05-28 14:16:14Z

11

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

Try this code.

answered May 28, 2013 at 14:16

Harsha Venkataramu

2,9121 gold badge37 silver badges62 bronze badges

Comments

Anuga · Accepted Answer · 2018-08-13 08:07:35Z

10

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 id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

answered Aug 13, 2018 at 8:07

Anuga

2,8271 gold badge22 silver badges30 bronze badges

4 Comments

TheQ Over a year ago

The original accepted answer still works better for my use case, since I need text to flow properly below the image, and adapt to the size of the image. jsfiddle.net/soqkrbut is an updated version of the original answer, that works exactly as I want. Using this code does not work, see jsfiddle.net/uzhoy6pm

Wyatt Ward Over a year ago

Thanks for this; hate when jquery gets forced into a question I otherwise have.

smoore4 Over a year ago

I know it should be avoided but +1 for the Iron Man image.

Anuga Over a year ago

I was ahead of my time (50+ hours in the game now :)

Om Shankar · Accepted Answer · 2013-05-28 14:49:35Z

3

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

edited May 28, 2013 at 14:49

answered May 28, 2013 at 14:37

Om Shankar

8,0594 gold badges38 silver badges54 bronze badges

6 Comments

Niet the Dark Absol Over a year ago

What if the image's size changes, or is just not fixed? That'd be a mess. Mind you, this is a mess with 180 and 270 rotations ;)

Om Shankar Over a year ago

@Kolink. Cool. Anyways, you have jQuery and JS on the page. One can calculate and apply this CSS on the fly. I am editing the answer for JS. Thanks for pointing out !

Niet the Dark Absol Over a year ago

Seems a bit over-convoluted. I prefer my solution :p It's completely independent of the image's size.

Om Shankar Over a year ago

@Kolink, I am going per the concept as read from Mozilla DN. In your solution (which is good of course), you are doing an additional tranlate. This is cheating :) Also, conceptually, translating is what is achieved by using the transform-origin values - only that they translate the origin of the transform, rather than the element itself

Niet the Dark Absol Over a year ago

The problem is that you can't have a single origin to handle all four positions. This is why I stuck with one origin and adjusted the position to place it correctly.

|

Man Sun · Accepted Answer · 2016-07-20 06:16:32Z

3

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

answered Jul 20, 2016 at 6:16

Man Sun

492 bronze badges

Comments

thisiskelvin · Accepted Answer · 2019-08-07 14:29:26Z

3

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.

edited Aug 7, 2019 at 14:29

thisiskelvin

4,2021 gold badge12 silver badges18 bronze badges

answered May 30, 2013 at 8:04

Prachi Jain

592 bronze badges

1 Comment

Piyin Over a year ago

@Mikeys4u The library wasn't loading. This one works: jsfiddle.net/MQ3YF/112

Nguyen Hai DANG · Accepted Answer · 2019-09-17 09:14:08Z

3

I think this will work.

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

Hope this helps. It's work with me.

answered Sep 17, 2019 at 9:14

Nguyen Hai DANG

311 bronze badge

Comments

Wojciech Bednarski · Accepted Answer · 2013-05-28 14:17:05Z

2

You can always apply CCS class with rotate property - http://css-tricks.com/snippets/css/text-rotation/

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.

answered May 28, 2013 at 14:17

Wojciech Bednarski

6,4539 gold badges51 silver badges75 bronze badges

1 Comment

Om Shankar Over a year ago

"CCS class with rotate property" - Both typo and conceptual error?

rioV8 · Accepted Answer · 2018-08-16 14:28:58Z

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.

Collectives™ on Stack Overflow

Rotate image with javascript

9 Answers 9

9 Comments

Comments

4 Comments

6 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

9 Comments

Comments

4 Comments

6 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related