Vire/espelho uma imagem horizontalmente + verticalmente com CSS

As imagens são um componente de aplicativo essencial e divertido. Eles contribuem para o design do aplicativo e dão um belo layout. Muitas das propriedades oferecidas pelo CSS são benéficas de várias maneiras. Mais especificamente, ele fornece recursos que permitem o ajuste da imagem em qualquer direção, como virar vertical ou horizontalmente, girar e mais.

Este artigo o guiará sobre como virar ou espelhar uma imagem horizontal e verticalmente com CSS.

Como virar/espelhar uma imagem horizontal e verticalmente com CSS?

Existem vários métodos que podem ser usados ​​para virar ou girar as imagens no CSS. Discutiremos o seguinte:

• Método 1: Usando “Transform: escala ()" propriedade
• Método 2: Usando “Transformar: girar ()" propriedade

Método 1: Como girar/espelhar uma imagem de imagem horizontal e verticalmente usando a propriedade “Transform: Scale ()”?

O "Transform: escala ()”A propriedade redimensiona a imagem no plano 2D. A escala () especifica dois valores de coordenadas para o eixo x e o eixo y. A quantidade de escala feita em cada direção é determinada por suas coordenadas. O "Transform: scalex ()”Propriedade escala a imagem horizontalmente.

Exemplo

Adicione duas imagens no arquivo html. O primeiro será mantido como original ao longo do exemplo. Enquanto o outro será aplicado com as propriedades CSS:

• O "”A tag é utilizada para incluir uma imagem.
• O "src”Atributo especifica o URL da imagem.
• O "alt”É utilizado para especificar o texto se a imagem não carregar na página da web.
• O "largura”Atributo define a amplitude da imagem.
• O "aula”Está definido com um nome para acessar a imagem no CSS.

Aqui está o código HTML do cenário, como mencionado anteriormente:

Inicialmente, a página da web ficará assim:

Exemplo 1: Virar a imagem horizontalmente usando a propriedade “Transform: Scalex ()”

No CSS, adicione o “Transform: scalex ()”Propriedade para escalar a imagem horizontalmente:

.virar
Transform: scalex (-1);

Saída

Exemplo 2: Virar a imagem verticalmente usando a propriedade “Transform: Scaley ()”

Para escalar a imagem verticalmente no CSS, use o “Transformar: Scaley ()" propriedade:

Transformar: Scaley (-1);

Saída

Método 2: Como girar/espelhar uma imagem de imagem horizontal e verticalmente?

O CSS “Transformar: girar ()”Gire a imagem em torno do ponto fixo em um avião 2D. A função "giratex ()" gira a imagem no eixo x, e o "giratey ()" é utilizado para girar no eixo y.

Exemplo 1: Virar a imagem horizontalmente usando a propriedade "Transform: Rotatey ()"

No CSS, adicione o “transformar”Propriedade com o valor“giratey ()" no "virar”Classe para virar a imagem horizontalmente em“180”Graus:

Transform: giratey (180deg);

Saída

Exemplo 2: Virando a imagem verticalmente usando a propriedade "Transform: giratex ()"

Adicione o CSS “transformar”Propriedade com o valor“giratex ()”Para virar a imagem verticalmente:

Transform: giratex (180deg);

Saída

Como virar/espelhar uma imagem vertical ou horizontalmente no passeio?

Para aprender a virar uma imagem vertical ou horizontalmente no passeio, experimente as seguintes etapas.

Etapa 1: Crie um arquivo HTML

Primeiro, siga as etapas fornecidas para criar um arquivo HTML:

• Adicione um “”Elemento e atribui uma classe“flip-box”.
• Dentro deste cartão, adicione outro "" com a classe "flip-card”.
• Então, adicione um “”Tag com a“src","alt", e "estilo" atributos.

Aqui está o código HTML:

Etapa 2: Classe de estilo “flip-box”

O ".flip-box”Usado para acessar o contêiner com a classe“flip-box”:

.Flip-box
Posição: relativa;
Largura: 300px;
Altura: 300px;
margem: automático;

As propriedades mencionadas no trecho de código acima são descritas abaixo:

• ““posição”Propriedade com o valor“relativo”Define a posição do elemento de acordo com sua localização atual.
• O "largura" e "altura”As propriedades são utilizadas para definir a área do elemento.
• ““margem”A propriedade adiciona espaços ao redor do elemento.

Etapa 3: Classe de estilo “flip-card”

Agora, estilize o “flip-card" aula:

.flip-card
Posição: Absoluto;
largura: 100%;
Altura: 100%;
transição: tudo 0.5s facilidade;

A descrição das propriedades acima fornecidas é mencionada abaixo:

• ““posição" com o "absoluto”O valor define a localização do elemento em relação ao elemento quase posicionado.
• ““transição”A propriedade ajusta o movimento lento dos elementos dentro de uma duração especificada.

Etapa 4: estilo "IMG" elemento

O "”O elemento é estilizado com o CSS“Radio de fronteira" propriedade:

img
Radio de fronteira: 10px;

Aqui o "Radio de fronteira”Propriedade define os cantos da imagem como redondos.

Etapa 5: Vire uma imagem verticalmente no mouse

Para virar a imagem em pairar, o CSS “:flutuar”Pseudo-classe foi utilizado:

.Flip-Box: Passe o mouse .flip-card
Transform: giratex (180deg);

Saída

Etapa 6: Vire uma imagem horizontalmente no passeio

O "Transformar: giratey ()”A propriedade pode ser utilizada para virar a imagem horizontalmente:

.Flip-Box: Passe o mouse .flip-card
Transform: giratey (180deg);

Saída

Nós compilamos as abordagens para virar/espelhar uma imagem horizontal e verticalmente com CSS.

Conclusão

Para virar uma imagem em HTML, o CSS “transformar”Propriedade com os valores“escala()" e "girar ()”São utilizados. O "Scalex ()" e "giratey ()”São ajustados para virar a imagem horizontalmente. O "Scaley ()" e "giratex ()”Estão definidos para virar a imagem verticalmente. Para adicionar um efeito de pairar, o CSS “:flutuar”Pseudo-classe é aplicado. Este post explicou vários procedimentos sobre como virar uma imagem horizontal e verticalmente no CSS.