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     And this is the result i would like instead     Anyone have an idea on how to accomplish this

User · Answer

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.

_x000D_

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

_x000D_

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

_x000D_

<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>_x000D_
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>_x000D_
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

_x000D_

Edit

Removed the modulo, looks strange.

User · Answer

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    x000D   x000D  let rotateAngle   90  x000D   x000D  function rotate image    x000D    image setAttribute  style    transform  rotate     rotateAngle    deg     x000D    rotateAngle   rotateAngle   90  x000D    x000D   rotater   x000D    transition  all 0 3s ease  x000D    border  0 0625em solid black  x000D    border-radius  3 75em  x000D    x000D   lt img id  rotater  onclick  rotate this   src  https   upload wikimedia org wikipedia en e e0 Iron Man bleeding edge jpg   gt  x000D   x000D   x000D

User · Answer

var angle   0      button   on  click   function         angle    90          image   css  transform   rotate     angle    deg           Try this code

User · Answer

You use a combination of CSS s transform  with vendor prefixes as necessary  and transform-origin  like this   also on jsFiddle    x000D   x000D  var angle   0  x000D    img   document getElementById  container    x000D  document getElementById  button   onclick   function     x000D    angle    angle   90    360  x000D    img className    rotate    angle  x000D    x000D   container   x000D    width  820px  x000D    height  100px  x000D    overflow  hidden  x000D    x000D   container rotate90  x000D   container rotate270   x000D    width  100px  x000D    height  820px x000D    x000D   image   x000D    transform-origin  top left  x000D       IE 10   Firefox  etc     x000D    -webkit-transform-origin  top left  x000D       Chrome    x000D    -ms-transform-origin  top left  x000D       IE 9    x000D    x000D   container rotate90  image   x000D    transform  rotate 90deg  translateY -100    x000D    -webkit-transform  rotate 90deg  translateY -100    x000D    -ms-transform  rotate 90deg  translateY -100    x000D    x000D   container rotate180  image   x000D    transform  rotate 180deg  translate -100   -100    x000D    -webkit-transform  rotate 180deg  translate -100   -100    x000D    -ms-transform  rotate 180deg  translateX -100   -100    x000D    x000D   container rotate270  image   x000D    transform  rotate 270deg  translateX -100    x000D    -webkit-transform  rotate 270deg  translateX -100    x000D    -ms-transform  rotate 270deg  translateX -100    x000D    x000D   lt button id  button  gt Click me  lt  button gt  x000D   lt div id  container  gt  x000D     lt img src  http   i stack imgur com zbLrE png  id  image    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Hope this can help you    lt input type  button  id  left   value  left    gt   lt input type  button  id  right  value  right    gt   lt img src  https   www google com images srpr logo3w png  id  image  gt    lt script gt   var angle   0          left   on  click   function                angle -  90              image   rotate angle                    right   on  click   function                angle    90              image   rotate angle            lt  script gt    Try it

User · Answer

I think this will work       document getElementById   image   style transform    rotate 90deg      Hope this helps  It s work with me

User · Answer

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

User · Answer

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

[javascript] Rotate image with javascript

Examples related to javascript

Examples related to jquery