>> Tecnologia Eletrônica >  >> Casa Inteligente >> Vida Inteligente

Como Espelhar Imagem Horizontalmente com HTML/CSS (Flip Horizontal)

Espelhe imagem no navegador sem editar o arquivo original. Use CSS transform: scaleX(-1) (moderno, todos navegadores) — o artigo original usa filter:FlipH (proprietário IE, obsoleto).

Método Moderno (CSS Transform) — Recomendado

<img src="foto.jpg" alt="Descrição" class="espelhada">

<style>
  .espelhada {
    display: inline-block; /* necessário para transform em img */
    transform: scaleX(-1); /* espelha horizontalmente */
  }
</style>

Método Inline (Rápido, Sem CSS Externo)

<img src="foto.jpg" alt="Descrição" style="display:inline-block; transform:scaleX(-1);">

Espelhar Verticalmente (Flip Vertical)

transform: scaleY(-1); /* ou scale(-1, -1) para ambos */

Método Antigo (IE Only) — Não Use

style="filter:FlipH" — só funcionava Internet Explorer 5.5-9. Falha no Edge, Chrome, Firefox, Safari, Mobile.

Casos de Uso

  • Ícone de seta: uma imagem serve para esquerda e direita.
  • Logos / padrões simétricos.
  • Corrigir selfie frontal (câmera frontal espelha preview mas salva normal — ou vice-versa).
  • Animação CSS: @keyframes flip { to { transform: scaleX(-1); } }.

Considerações

  • Texto na imagem fica espelhado (ilegível) — evite em imagens com texto.
  • transform não afeta layout (fluxo do documento) — use margin se precisar ajustar posição.
  • Performance: GPU accelerated, leve.
  • Eletrodomésticos
  • Aspiradores Robô
  • Segurança Residencial
  • Aspirador de pó
  • Máquinas de lavar roupas
  • Refrigeradores
  • Ar-Condicionado
  • Vida Inteligente

    • Vida Inteligente