Como inverter uma imagem com CSS (espelhar/flip)

Publicado em 15/05/2020

Neste artigo vamos ver como inverter uma imagem com CSS, conhecido também como flip ou espelhar, de forma fácil sem utilizar bibliotecas de terceiros.

inverter uma imagem com CSS capa

Fala programador(a), beleza? Bora aprender como espelhar uma imagem com CSS!

Inverter uma imagem com CSS é muito fácil, para esta ação utilizamos a regra transform

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

E o valor da regra deve ser scaleX(-1), isso fará com que a imagem fique invertida

Vamos ver o exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Como inverter uma imagem com CSS</title>
    <meta charset="utf-8">
</head>
<body>
    <img src="bg-img.jpg">
    <img id="inverter" src="bg-img.jpg">
</body>
</html>

Aqui criamos um simples HTML com duas imagens

Uma tem um id #inverter, que será utilizado para aplicar a regra de inversão

Então veja o CSS necessário:

#inverter {
    transform: scaleX(-1);
}

E agora o resultado final:

imagem espelhada com css

Veja que a segunda imagem está invertida em relação a primeira

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Então assim conseguimos inverter uma imagem com CSS de forma muito simples e rápida

Obs: tome cuidado com navegadores antigos e que ainda não suportam o transform completamente

Para isso adicione o código da seguinte maneira:

#inverter {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

Com isso você já pode ficar tranquilo que o código de inversão vai funcionar nesses outros navegadores

É sempre uma boa prática checar se o recurso pode ser utilizado, utilize o site Can I Use para isso

Conclusão

Neste artigo vimos como inverter uma imagem apenas com CSS, ou seja, espelhar uma imagem ou fazer o flip em imagens

Para isso apenas precisamos adicionar a regra transform com o valor de scaleX(-1)

Além disso tome cuidado com browsers que não se adaptaram completamente ao transform

E adicione as regras de compatibilidades citadas no post

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn