Você pode inverter imagens com CSS! Cenário possível: ter apenas um gráfico para uma “seta”, mas virando-o para apontar em direções diferentes.
.flip-horizontally ( transform: scaleX(-1); )Veja como uma seta é usada para apontar as duas direções aqui:
Veja a Caneta
Inverter uma Imagem por CSS-Tricks (@ css-tricks)
no CodePen.
A rotação é outra possibilidade, o que significa que nossa única seta pode ir em muitas direções:
Veja a Caneta
Inverter uma Imagem por CSS-Tricks (@ css-tricks)
no CodePen.
Esta também é qualquer imagem, ou realmente qualquer elemento.
Veja a Caneta
Inverter uma Imagem por CSS-Tricks (@ css-tricks)
no CodePen.
Prefixos de fornecedores antigos
Para a posteridade:
img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )