CSS: Reflexão Horizontal e Vertical de Imagens
Resposta Rápida
Para realizar a reflexão horizontal de uma imagem em CSS, utilize transform: scaleX(-1); e para a reflexão vertical, use transform: scaleY(-1);. Para refletir uma imagem simultaneamente nas direções horizontal e vertical, criando uma imagem espelho, utilize transform: scale(-1, -1);.
/* Para reflexão horizontal de uma imagem */
.img-flip-h { transform: scaleX(-1); }
/* Para reflexão vertical de uma imagem */
.img-flip-v { transform: scaleY(-1); }
/* Para reflexão simultânea de uma imagem em ambos os eixos */
.img-flip-both { transform: scale(-1, -1); }Atribua a classe apropriada à sua imagem:
<img src="imagem.jpg" class="img-flip-h">
<img src="imagem.jpg" class="img-flip-v">
<img src="imagem.jpg" class="img-flip-both">Compatibilidade entre Navegadores
Certifique-se de que o efeito de reflexão é suportado em todos os navegadores. Em versões mais antigas do Internet Explorer, utilize -ms-transform ou filter como uma solução alternativa. Aqui estão os exemplos de código:
/* Para Internet Explorer 9 */
.img-flip-h { -ms-transform: scaleX(-1); }
.img-flip-v { -ms-transform: scaleY(-1); }
.img-flip-both { -ms-transform: scale(-1, -1); }
/* Para Internet Explorer 8 e versões anteriores */
.img-flip-h { filter: fliph; }
.img-flip-v { filter: flipv; }
.img-flip-both { filter: fliph flipv; }Importante: A propriedade filter não está em conformidade com os padrões CSS.
Equivalentes do Tailwind CSS
Se você está trabalhando com TailwindCSS, a reflexão pode ser simplificada usando classes utilitárias:
<!-- Reflexão horizontal -->
<img src="imagem.jpg" class="transform -scale-x-100">
<!-- Reflexão vertical -->
<img src="imagem.jpg" class="transform -scale-y-100">
<!-- Reflexão em ambos os eixos -->
<img src="imagem.jpg" class="transform -scale-x-100 -scale-y-100">Entendendo Rotação e Reflexão
A reflexão de imagens pode, às vezes, ser alcançada através da rotação. Visualmente, uma rotação de 180 graus (transform: rotate(180deg);) é semelhante a refletir tanto horizontal quanto verticalmente, mas tecnicamente são operações diferentes.
/* Rotacionar imagem 180 graus */
.img-rotate-180 { transform: rotate(180deg); }Técnicas para Reflexão Complexa
Para criar efeitos de reflexão mais complexos, especialmente quando uma transformação já está aplicada a um elemento, usar transformações matriciais pode ser útil:
/* Reflexão complexa usando uma matriz */
.img-advanced-flip {
transform: matrix(-1, 0, 0, -1, 0, 0);
}A transformação matricial permite combinar efeitos sem conflitos com propriedades transform anteriores.
Visualização
Refletir uma imagem usando CSS pode ser imaginado como virar uma panqueca em uma frigideira:
Imagem original 🖼️ : [🌅]
Reflexão horizontal (css: `scaleX(-1)`):
Antes: [🌅] => Depois: [🌄]
Reflexão vertical (css: `scaleY(-1)`):
Antes: [🌅] => Depois: [🔃]
Ambas as reflexões (css: `scale(-1, -1)`):
Antes: [🌅] => Depois: [🔄]Problemas ao Combinar Reflexões
Ao combinar reflexões horizontais e verticais, problemas podem surgir, geralmente relacionados à ordem incorreta da aplicação das transformações. Verifique seu código CSS para evitar situações semelhantes.
Reflexão de Imagens de Fundo
Para refletir uma imagem de fundo, pode ser necessária uma abordagem diferente:
/* Refletindo um elemento com uma imagem de fundo */
.flip-background {
background-image: url('sua-imagem.jpg');
transform: scale(-1, -1);
background-size: cover;
background-repeat: no-repeat;
}Essa abordagem reflete o elemento inteiro, incluindo a imagem de fundo.
Recursos Úteis
- transform | CSS-Tricks — um guia detalhado sobre a propriedade
transform. - transform - CSS: Folhas de Estilo em Cascata | MDN — documentação oficial do MDN sobre
transform. - Propriedade CSS transform — material de tutorial e exemplos de uso para
transform. - Can I use... Tabelas de suporte para HTML5, CSS3, etc — tabelas de suporte ao navegador para transformações 2D do CSS.
- Como aplicar transformações CSS3 em imagens de fundo — SitePoint — um guia sobre como aplicar transformações a imagens de fundo.
- Como criar uma animação de cartão flip com CSS — instruções para criar uma animação de cartão flip usando CSS.