How to flip (mirror/flip) an image

Question

Well, I need to invert an image preferably if possible with CSS. I don’t know if it’s possible.

I wanted to point the arrow to the left. Thank you

Answer 1

It is possible yes, with the property tansform: scaleX(..) you do that easily:

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">

Answer 2

Within the Transform attribute, there are also functions Rotate(), rotateX(), rotateY(), rotate3d() and rotateZ(), they all work with the unit deg or in English degrees, the basic values can be any of 0 to 360*.

In your case, you would do a 180º Y-axis rotation, something like this.

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

Remarks:

1. the attribute values the rotations can be any number, even the negative ones, that values make sense when you want to animate the object, for example the number 720 indicates that there were two complete rotations.
2. negative values interfere with the direction of rotation.

more about Transform’s functions in Mozilla Transform Function

Answer 3

Boy, what you’re trying to do is called image mirroring.

CSS has this feature, as Miguel said. But there are several image editors out there that mirror images and that I, in particular, choose to use.

If you want something more basic and understandable, use the Photoscape. It is free and very practical and easy to use.

Now, if you want something more professional that uses not only basic things like masks, effects and so on, Corel Draw or the very Adobe Photoshop.

But since it’s just an image mirroring that you need, use CSS commands yourself.

Answer 4

Even Paint has this feature. It’s pretty basic. I do use Corel Draw. But as most of the guys have already mentioned there are several capable programs, some more robust and as I said, even the old Paint rs. A hug