jquery rotar imagen onclick

Solución:

Dependiendo de las versiones de navegador que necesite admitir, puede probar las transformaciones CSS.

Primero, defina una clase CSS como esta:

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

Y luego puede usar jQuery para agregar la clase al hacer clic en el enlace:

<img src="https://foroayuda.es/down_arrow.png" onclick="$(this).addClass('rotated');" />

Usa una combinación de reglas CSS -webkit-transform y -moz-transform al hacer clic en la imagen Por ejemplo, para rotar la imagen en 90 grados, aplique las siguientes reglas css al hacer clic

$('img').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)" /* For modern browsers(CSS3)  */
    });
});

Considere una extensión jQuery como: jQueryRotate

Hará que la rotación dentro del onclick sea mucho más fácil y más legible.

---

---

Utiliza Nuestro Buscador