Como espelhar/inverter um elemento com CSS?

Muitas vezes, precisamos de um ícone, ou uma imagem, ou um elemento invertido, quer seja horizontal ou verticalmente.

Para os casos de ícones ou imagens, alguns podem pensar em usar algum editor para fazer o espelhamento, mas isso não é necessário. Há uma maneira de resolver isso apenas com CSS.

Espelhando os elementos horizontalmente

No CSS, podemos fazer o espelhamento horizontal através da propriedade transform. Para fazer isso, existem duas funções que podem ser utilizados junto à propriedade transform.

Utilizando a função scale

A função scale define uma transformação que redimensiona um elemento no plano 2D. Em outras palavras, você pode utilizá-la para aumentar ou diminuir a escala de um elemento com CSS. Se utilizamos valores negativos, o resultado será um point reflection com o valor informado. Como informamos o valor -1, o elemento é invertido, sem afetar a escala do mesmo, já que o valor 1 representa a escala base do elemento. A função scale também pode receber dois valores, que representam a posição X e Y de um elemento. Além disso, podemos utilizar as variações scaleX ou scaleY para afetar apenas um posicionamento, caso seja necessário.

No nosso exemplo, já que queremos espelhar os elementos horizontamente, podemos utilizar a função scaleX com o valor -1.

Exemplo:

.caixa {
   height: 100px;
   background-color: yellow;
}
.caixa.inverter {
   transform: scaleX(-1);
}

Se preferir, você pode utilizar a função scale, informando os valores -1 para o argumento X e 1 para Y.

.caixa {
   height: 100px;
   background-color: yellow;
}
.caixa.inverter {
   transform: scale(-1, 1);
}

Utilizando a função rotateY

Outra opção é utilizar a função rotateY(180deg).

As funções rotate, rotateX ou rotateY definem uma transformação que rotaciona um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. Ao utilizar 180deg, você estará espelhando o elemento horizontalmente (pois estará girando ele ao contrário em torno do eixo Y).

.caixa.inverter{
   transform: rotateY(180deg);
}

Espelhando verticalmente

Agora que já entendemos o básico para aplicar o espelhamento horizontal, fazer o espelhamento vertical não vai ser uma tarefa difícil.

Podemos utilizar as funções scaleY(-1) e scale(1, -1), ou rotateX(180deg) para fazer isso.

Veja esses exemplos:

.caixa.inversao-vertical-scale-y{
   transform: scaleY(-1);
}
.caixa.inversao-vertical-scale{
transform: scale(1, -1);
}
.caixa.inversao-vertical-rotate-x{
transform: rotateX(180deg);
}

Espelhando uma imagem com CSS

No exemplo acima, utilizamos uma div simples para testar o espelhamento horizontal. Porém, podemos fazer isso também com a tag img, para espelhar uma imagem. Isso é muito útil, pois dispensa a utilização de editores, evitando também duplicação desnecessária de imagens no projeto.

Veja:

<img src="https://wallacemaxters.com.br/static/img/logo.webp" >
<img src="https://wallacemaxters.com.br/static/img/logo.webp" style="transform: scaleX(-1)">
<img src="https://wallacemaxters.com.br/static/img/logo.webp" style="transform: scaleY(-1)">