Cómo rotar una imagen con CSS y HTML

Girar una imagen en una página web es posible con el uso del código CSS para crear una clase de rotación, que luego puede usar con el etiqueta para rotar la imagen en la página.

Rotando una imagen usando

El código CSS debe incluir el código de transformación para cada navegador de Internet principal, de modo que la imagen se gire en todos los navegadores.

A continuación se muestra un ejemplo de código CSS para rotar una imagen 180 grados.

 .rotateimg180 {-webkit-transform: rotate (180deg); -moz-transform: rotate (180deg); -ms-transform: rotar (180deg); -o-transformar: rotar (180 grados); transformar: girar (180deg); } 

Una vez que el código CSS se haya aplicado a su archivo .css o a su hoja de estilo, puede usar el nombre de la clase CSS en cualquiera de sus etiquetas de imagen como se muestra en el siguiente código.

Consejo: para rotar una imagen en otra medida de grados, cambie el "180" en el código CSS y Etiqueta al grado que desees.

Imagen rotada utilizando el código anterior.

A continuación se muestra un ejemplo de nuestro logotipo utilizando el código anterior. Si su navegador admite la rotación CSS, el logotipo debería aparecer girado 180 grados.