Cómo rotar una imagen con HTML

La capacidad de rotar imágenes libremente es útil, especialmente en páginas web. Si quieres aprender a convertir una imagen con HTML, estás en el lugar indicado.

Puede utilizar CSS (hojas de estilo en cascada) para cambiar muchos elementos HTML, incluido el posicionamiento de la imagen. HTML le brinda el diseño básico, pero CSS es quizás incluso más crítico porque 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 de transformación

El siguiente método gira en torno al uso de la propiedad “transform”. Esta propiedad le permite cambiar valores específicos para varios 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 se usa la función de transformación para rotar una imagen usando codificación JavaScript. Debe especificar un ángulo como 180 grados o grados para abreviar. También necesita determinar la dirección, por ejemplo, en el sentido de las agujas del reloj.

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

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

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

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 transform con un valor de rotación establecido.

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

.element {

transformar: rotar (90 grados);

}

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

Cómo rotar una imagen HTML usando la clase Rotar

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

Así es como puede rotar una imagen HTML con código CSS, compatible con 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 características como la altura y el ancho, utilizando el formulario apropiado, como se muestra a continuación.

por ejemplo,

Si desea probar esto, asegúrese de que su navegador admita la rotación de imágenes CSS. Verá inmediatamente si los resultados son satisfactorios o no.

En caso de que puedas rotar la imagen original con un editor de imágenes antes de subirla a tu sitio, probablemente te ahorraría muchos problemas. La rotación de imágenes con HTML no es ciencia nuclear, pero requiere un conocimiento básico de CSS.

Fácil rotación de imágenes

La rotación de imágenes mediante CSS puede resultar muy útil. Una imagen colocada de manera extraña a menudo asoma los ojos, y parece poco profesional en su sitio. Los métodos anteriores son relativamente sencillos, pero siempre es más fácil ajustar la imagen antes de decidir cargarla.

¿Cuál de los métodos usaste? ¿Tuviste 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.