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.