Cómo rotar una imagen con HTML

La capacidad de rotar libremente las im√°genes es conveniente, especialmente en las p√°ginas web. Si quieres aprender a voltear una imagen con HTML, est√°s en el lugar correcto.

Puede usar CSS (hojas de estilo en cascada) para cambiar muchos elementos HTML, incluido el posicionamiento de la imagen. HTML le proporciona el dise√Īo b√°sico, pero CSS puede ser a√ļn m√°s cr√≠tico, ya que le permite personalizar y ajustar todos los detalles de su p√°gina web, incluidas las im√°genes.

  

Cómo rotar una imagen HTML usando el método Transformar

El siguiente método gira en torno al uso de la propiedad "transformar". Esta propiedad le permite cambiar valores específicos para diferentes elementos web. También te permite rotar imágenes. También puede usarlo para escalar, mover, sesgar, etc.

Está a punto de ver cómo transforman la función de girar una imagen con codificación JavaScript. Debe establecer un ángulo como 180 grados o grados demasiado cortos. También debe determinar la dirección, p. las agujas del reloj.

Así es como se ve el método de transformación en JavaScript. Utilizaremos los ejemplos que le dimos en este momento, con la adición del evento onclick para asignar una función:

Girar imagen con JavaScript

Haga clic en la imagen para girarla 180 grados en el sentido de las agujas del reloj.

función rotateImage () {

var img = document.getElementById ('myimage');

img.style.transform = 'rotar (180 grados)';

}

Cómo rotar una imagen con HTML

Cómo rotar una imagen HTML usando el método del elemento

Otro método bastante simple (para aquellos que saben lo que están haciendo) es el método del elemento. En lugar de la función de transformación, también puede usar la clase .element en la sección de estilo. Esta clase tiene la propiedad de transformación con un valor de rotación establecido.

Puede asignar la clase a su imagen utilizando el código dinámico de JavaScript. Así es como se ve en JavaScript:

Girar imagen con JavaScript

.element {

transformar: rotar (90 grados);

}

Haga clic en la imagen para rotarla 90 grados en el sentido de las agujas del reloj.

""

función rotateImage () {

var img = document.getElementById ('myimage');

img.className = 'elemento';

}

Cómo rotar una imagen HTML con la clase rotar

Este es quizás el método más simple de los tres que ofrecemos en este artículo. Esto requiere que solo ingrese el código correctamente para diferentes navegadores principales. No desea mostrar la imagen correctamente solo en Mozilla, por ejemplo, porque las personas que usan otros navegadores la ven al revés.

Aquí le mostramos cómo rotar una imagen HTML con código CSS, compatible con todos los principales navegadores:

.rotateimg180 {

-webkit-transform: rotar (180 grados);

-moz transform: rotar (180 grados);

-ms-transform: rotar (180 grados);

-o-transform: rotar (180 grados);

transformar: rotar (180 grados);

}

Puede cambiar el grado de rotación, pero también otras propiedades como la altura y el ancho, de forma adecuada, como se muestra a continuación.

por ejemplo

Si desea probar esto, aseg√ļrese de que su navegador sea compatible con la rotaci√≥n de im√°genes CSS. Inmediatamente ver√° si los resultados son satisfactorios o no.

Rotar la imagen original con un editor de im√°genes antes de subirla a su sitio web probablemente le ahorrar√° muchos problemas. Girar im√°genes con HTML no es una ciencia central, pero requiere un conocimiento b√°sico de CSS.

Rotar una imagen con HTML

Rotación de imagen simple

Girar im√°genes con CSS puede ser muy √ļtil. Una imagen colocada de manera extra√Īa a menudo llama la atenci√≥n, y se ve poco profesional en su sitio. Los m√©todos anteriores son relativamente simples, pero siempre es m√°s f√°cil ajustar la imagen antes de decidir cargarla.

¬ŅCu√°l de los m√©todos usaste? ¬ŅHa tenido problemas para usarlo o todo sali√≥ bien? H√°ganos saber en la secci√≥n de comentarios a continuaci√≥n y si√©ntase libre de agregar sus ideas a la discusi√≥n.