7

Bom, eu preciso de inverter uma imagem de preferência se possível com CSS. Não sei se e possível.

inserir a descrição da imagem aqui

Eu queria meter a seta a apontar para a esquerda. Obrigado

4 Respostas 4

19

É possível sim, com a propriedade tansform: scaleX(..) fazes isso facilmente:

img {
  width: 260px;
}
#esquerda {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
<img id="direita" src="https://i.stack.imgur.com/o0Elb.png">
<img id="esquerda" src="https://i.stack.imgur.com/o0Elb.png">

1
  • Faz uma com rotate tambem (e bota uma observação para que no caso da seta, por acaso, como é simétrica, dá certo) :P
    – Largato
    28/11/2019 às 22:42
5

Dentro do atributo transform, existem também as funções rotate(), rotateX(), rotateY(), rotate3d() e rotateZ(), todas elas trabalham com a unidade deg ou em português graus, os valores básicos podem ser qualquer um de 0 a 360*.

Para o seu caso, vc faria uma rotação no eixo Y de 180º, ficando algo assim.

.refletir-esquerda{
   transform: rotateY(180deg);
}

Observações:

  1. os valores atributos as rotações podem ser qualquer número, até mesmo os negativos, esse valores fazer sentido quando você quer animar o objeto, por exemplo o número 720 indica que houve duas rotações completas.
  2. valores negativo interfere na direção da rotação.

mais sobre as funções do transform em mozilla transform function

-2

Rapaz, o que você está tentando fazer se chama espelhamento de imagem.

O CSS possui esse recurso, como o Miguel bem falou. Mas existem diversos editores de imagens por aí que fazem o espelhamento de imagens e que eu, particularmente, opto por usar.

Se tu quiser algo mais básico e compreensível, usa o Photoscape. Ele é de graça e bem prático e fácil de usar.

Agora, se tu quiser algo mais profissional que usa não só coisas básicas como máscaras, efeitos e etc., sugiro o Corel Draw ou o próprio Adobe Photoshop.

Mas como é só um espelhamento de imagem que tu precisa, usa comandos do CSS mesmo.

1
  • Só um detalhe, tu tinha falado em "inverter imagem". Se fosse inversão de imagem mesmo que tu queria, a área em braco ficaria preto e vice-versa. 31/03/2017 às 11:12
-4

Até mesmo o Paint possui esse recurso. Ele é bem básico. Eu uso o Corel Draw mesmo. Mas como a maioria da galera já citou existem vários programas capazes, uns mais robustos e como disse, até mesmo o velho Paint rs. Um abraço

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .