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.
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
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:
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