Girar imagem em HTML
Este artigo apresentará um método para girar uma imagem em HTML.
Use a propriedade CSS transform para girar uma imagem em HTML
A propriedade CSS transform implica modificar um elemento particular em nosso código. Precisamos de um recurso externo, a imagem que transformamos neste caso, para transformá-lo. Esta propriedade aplica uma transformação 2D ou 3D a um elemento. Além disso, essa propriedade também dá a autorização para girar, dimensionar, mover, inclinar, etc., para os detalhes. Ele também altera o espaço de coordenadas do modelo de formatação visual CSS. Os elementos cujo layout é regido pelo modelo de caixa CSS só podem ser transformados. Podemos definir a propriedade transform para uma função rotate() mencionando a unidade na função para girar uma imagem em HTML. O valor pelo qual a imagem deve ser girada deve ser fornecido entre parênteses da função. A unidade deg é usada para especificar o valor de rotação. Podemos usar o CSS inline para esse propósito. O CSS será usado na tag <img>.
Por exemplo, insira uma imagem normal com a tag <img> em HTML. Defina o atributo src como https://loremflickr.com/320/320. Então, para uma rotação de 90 graus, insira a imagem e adicione alguns estilos a ela. No atributo de estilo, defina a propriedade transform como rotate(90deg). Em seguida, adicione uma tag <br>. Da mesma forma, gire as imagens para 180deg e 360deg.
O exemplo abaixo ilustra um método para girar uma imagem em uma fonte de imagem em HTML. Nós definimos o estilo da tag <img>, o que significa que a imagem inserida pode ser girada com a propriedade transform:rotate(). Inserimos a imagem original e giramos a imagem para 90, 180 e 360 graus. Podemos escrever os valores de graus desejados na função rotate(). A segunda imagem no exemplo gira até a metade do eixo. A terceira imagem parece de cabeça para baixo porque é girada em 180 graus. Quando a imagem completa uma rotação de 360 graus, ela se parece com a imagem original. Assim, podemos usar a propriedade transform() e o valor rotate() para girar a imagem usando HTML e CSS.
Código de exemplo:
<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