Rotar una imagen con JavaScript

La rotación de un elemento HTML es un requisito común que se realiza mediante CSS. CSS proporciona una propiedad de transformación que puede usar para realizar esta tarea. En este artículo, aprenderemos cómo rotar imágenes usando JavaScript.

Rotar una imagen con JavaScript usando CSS Transform

La propiedad de transformación de CSS le permite rotar, escalar, sesgar o mover un elemento. Cambie el espacio de coordenadas del modelo de formato visual CSS. Se crea un contexto de apilamiento si la propiedad tiene un valor distinto de ninguno. En este caso, el elemento actúa como un bloque contenedor cuya posición se establece como position: fixed o position: absolute según los elementos que contenga.

La propiedad de transformación se puede especificar como una palabra clave none o como una o más funciones transform. Si la perspectiva () es uno de varios valores de función, debe aparecer primero.

Sintaxis:

transform: none;
transform: translateX($Xpx) rotate($Ydeg) translateY($Zpx);

Los valores de transformación son transform-function cuando se van a aplicar una o más de las funciones de transformación de CSS. Las funciones de transformación se multiplican de izquierda a derecha. De compuesto de derecha a izquierda, las transformaciones se aplican de manera efectiva. En la sintaxis anterior, usamos translateX, que traduce un elemento con un determinado píxel horizontalmente, translateY, que traduce un elemento con un determinado píxel verticalmente, y rotate, que gira un elemento en cierto grado alrededor de un punto fijo en el plano 2D.

none indica que no se debe aplicar ninguna transformación. Consulte la documentación de transform para obtener más información.

<input id="button" type="button" value="Rotate">
<div id="img_container">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<div>

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

#img_container.rotate90 {
  width: 100px;
  height: 820px
}
#image {
  transform-origin: top left;
  -webkit-transform-origin: top left;
}
#img_container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
}

En el código anterior, creamos un contenedor y cada vez que el usuario hace clic en el botón de rotación, agregamos 90 grados al ángulo actual y tomamos el módulo de 360 ​​grados. Una vez que se encuentra el ángulo final, podemos agregar las clases predefinidas cuyas propiedades se han declarado usando CSS.

El ejemplo solo muestra una rotación de 90 grados, pero puede definirla en cualquier ángulo como 45 grados o 105 grados y así sucesivamente. La salida del código anterior se ve así: