Rotar imagen en HTML
Este artículo presentará un método para rotar una imagen en HTML.
Utilice la propiedad CSS transform para rotar una imagen en HTML
La propiedad CSS transform implica modificar un elemento particular en nuestro código. Necesitamos un recurso externo, la imagen que transformamos en este caso, para transformarla. Esta propiedad aplica una transformación 2D o 3D a un elemento. Además, esta propiedad también da la autorización para rotar, escalar, mover, sesgar, etc., a los detalles. También altera el espacio de coordenadas del modelo de formato visual CSS. Los elementos cuyo diseño se rige por el modelo de caja CSS solo se pueden transformar. Podemos establecer la propiedad transform en una función rotate() mencionando la unidad en la función para rotar una imagen en HTML. El valor por el cual se rotará la imagen debe proporcionarse entre paréntesis de la función. La unidad deg se utiliza para especificar el valor de rotación. Podemos utilizar el CSS en línea para este propósito. El CSS se utilizará en la etiqueta <img>.
Por ejemplo, inserte una imagen normal con la etiqueta <img> en HTML. Establezca el atributo src en https://loremflickr.com/320/320. Luego, para una rotación de 90 grados, inserte la imagen y agregue algunos estilos. En el atributo de estilo, establezca la propiedad transform en rotate(90deg). Luego, agregue una etiqueta <br>. Del mismo modo, rote las imágenes a 180deg y 360deg.
El siguiente ejemplo ilustra un método para rotar una imagen en una fuente de imagen en HTML. Hemos diseñado la etiqueta <img>, lo que significa que la imagen insertada se puede rotar con la propiedad transform:rotate(). Insertamos la imagen original y giramos la imagen a 90, 180 y 360 grados. Podemos escribir los valores de grado deseados en la función rotate(). La segunda imagen del ejemplo gira hasta la mitad del eje. La tercera imagen se ve al revés porque está girada a 180 grados. Cuando la imagen completa una rotación de 360 grados, se ve como la imagen original. Por lo tanto, podemos usar la propiedad transform() y el valor rotate() para rotar la imagen usando HTML y CSS.
Código de ejemplo:
<html>
<body>
Original Image
<img src="https://loremflickr.com/320/320" /> <br>
90 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(90deg);"> <br>
180 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(180deg);"> <br>
360 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(360deg);"> <br>
</body>
</html>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn