Gire uma imagem na fonte de imagem em html

As imagens são uma parte essencial dos sites que transmitem algumas informações e tornam as páginas da web mais atraentes. Além disso, os usuários podem adicionar vários tipos de imagens, incluindo imagens de produtos, controles deslizantes de imagem e ilustradores. Além disso, você pode aplicar vários efeitos sobre eles, como virar ou girar. Essas funcionalidades são aplicadas especificamente às imagens de amostra presentes nos aplicativos da web de edição de fotos.

Este post explicará:

• Método 1: Como girar uma imagem na fonte de imagem em html?
• Método 2: Como girar uma imagem em HTML utilizando propriedades CSS?

Método 1: Como girar uma imagem na fonte de imagem em html?

Para girar uma imagem na fonte de imagem em HTML, utilize o CSS embutido diretamente na fonte de imagem com a ajuda das instruções fornecidas.

Etapa 1: Crie um contêiner "div"
Primeiro de tudo, crie um “div“Contêiner com a ajuda do“”Tag e atribua -o a“aula”Atributo com um nome específico.

Etapa 2: Adicione imagem
Em seguida, adicione uma imagem utilizando o “”Tag junto com a“src”Atributo. Em seguida, atribua o nome da imagem ou o URL da imagem como um “src" valor:

A saída resultante mostra que a imagem foi adicionada com sucesso:

Etapa 3: gire a imagem
Em seguida, para girar a imagem em uma fonte de imagem, aplique o CSS embutido com a ajuda do “estilo”Atributo junto com a propriedade CSS“Transformar: Gire (30deg)”. O "transformar”É usado para aplicar a transformação ao elemento definido. Existem quatro valores possíveis para a transformação: “girar","escala","mover", e "inclinado”. Mais especificamente, o “girar ()”A função é utilizada para girar a imagem em torno de um plano 2D:

Saída

Etapa 3: Aplique o estilo na fonte da imagem usando CSS
Os usuários também podem aplicar as outras propriedades do CSS na fonte de imagem de acordo com suas necessidades. Para esse fim, primeiro, acesse o “.Fonte-IMG”Classe e aplique as propriedades CSS da seguinte forma:

.fonte-img
Largura: 100px;
Altura: 250px;
margem: 100px;

Aqui:

• "Largura" é utilizado para definir a largura do elemento.
• A propriedade de “altura” aloca uma altura específica para um elemento.
• "Margem" é usado para definir o espaço em branco ao redor do elemento.

Saída

Método 2: Como girar uma imagem em HTML utilizando propriedades CSS?

Os usuários também podem girar a imagem usando CSS incorporado. Várias propriedades podem ser usadas para esse fim, como o “girar”Propriedade e a“transformar" propriedade.

Siga os exemplos fornecidos para girar a imagem usando CSS:

• Exemplo 1: girar a imagem usando a propriedade "girar"
• Exemplo 2: Gire a imagem usando a propriedade "Transform"

Exemplo 1: girar a imagem usando a propriedade "girar"
O "girar”A propriedade CSS é utilizada para girar o elemento no sentido horário em torno do plano 2D. Para aplicar esta propriedade para girar a imagem, consulte as etapas fornecidas.

Etapa 1: Crie um contêiner "div"
Crie um recipiente "div" usando o "”Tag e insira um atributo de classe com um nome específico.

Etapa 2: adicione uma imagem
Em seguida, adicione uma imagem com a ajuda do “”Tag junto com a“src" e "alt" atributos. O atributo "alt" é usado para definir texto alternativo para a imagem:

Saída

Etapa 3: aplique a propriedade "girar"
Agora, acesse a classe usando o seletor de classe e o nome “.girar”. Então, aplique o “margem" e a "girar”Propriedade nele. Por exemplo, o valor do “girar"É definido como"45DEG”:

.girar
margem: 100px 50px;
Gire: 45deg;

A saída indica que a imagem é girada com sucesso usando o “girar”Atributo:

Exemplo 2: Gire a imagem usando a propriedade "Transform"
Acesse a classe usando “.girar”. Então, aplique o “margem" e "transformar”Propriedades:

.girar
margem: 100px 50px;
Transformar: girar (320deg);

Aqui o "transformar”A propriedade é usada para transformar a imagem. Em nosso cenário, o valor é definido como “girar (320deg)”. Onde "girar ()”É uma função usada para girar o elemento:

A saída acima mostra que a imagem é girada no ângulo especificado em torno do plano 2D.

Conclusão

Para girar a imagem na fonte de imagem no HTML, os usuários podem utilizar o “estilo”Atributo e defina o valor como“Transformar: girar ()”. Além disso, você também pode usar o CSS incorporado para girar a imagem na fonte da imagem com a ajuda de “girar”Propriedades. Este artigo declarou os procedimentos relacionados à rotação da imagem na fonte de imagem em HTML.