Rotar imagen con javascript

Te sugerimos que pruebes esta respuesta en un ambiente controlado antes de pasarlo a producción, saludos.

Solución:

Usas una combinación de CSS transform (con prefijos de proveedores según sea necesario) y transform-originasí: (también en 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%);

Click me!

  

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

Prueba este código.

Ya no es necesario jQuery ni mucho CSS (Tenga en cuenta que algunos navegadores necesitan CSS adicional)

Algo así como lo que publicó @Abinthaha, pero puro JS, sin necesidad de 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;

valoraciones y comentarios

---

---

Utiliza Nuestro Buscador