No curso de programar o game Highway em Javascript da Alura, eu me deparei com uma imagem de estrada de duas mãos, ou seja, carros indo nos dois sentidos. As imagens de carro providenciadas no curso, no entanto, estavam todas direcionadas para um mesmo lado. Como seria uma forma simples e funcional para inverter estas imagens dentro do próprio código sem que eu precise fazer isso manualmente por um programa terceiro?
Aproveite o aniversário da Alura
e comece sua jornada tech
Por tempo limitado
Oi, Gabriel, tudo bem?
Desculpe a demora em te responder!
Para espelhar uma imagem usando o próprio código podemos usar a propriedade do CSS transform com o atributo scaleX(-1), responsável por inverter horizontalmente um elemento. Como estamos colocando como parâmetro dentro do parênteses o "-1" a imagem será invertida em um ângulo de 180°, portanto, ela ficará espelhada.
Por exemplo, se tivermos uma imagem com a classe carro-espelhado, o comando no arquivo CSS, ficaria assim:
.carro-espelhado {
transform: scaleX(-1);
}Lembre-se que, caso você esteja usando a mesma imagem é interessante duplicá-la para conseguir garantir que a propriedade transformnão afete todas as imagens.
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!