CSS HTML

Como inverter uma imagem com CSS (espelhar/flip)

15 de maio de 2020

Como inverter uma imagem com CSS (espelhar/flip)

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

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x