How to invert an image with CSS (mirror an image)

In this article we will learn how to invert an image with CSS, also known as flip or mirror, easily without using third-party libraries.

Hey you programmer, ok? Let’s learn how to mirror an image with CSS!

Inverting an image with CSS is very easy, for this action we use the transform rule

And the rule value must be scaleX(-1), this will make the image inverted

Let’s see the example:

<img src="bg-img.jpg">
<img id="invert" src="bg-img.jpg">

Here we create a simple HTML with two images

One has an id #inverter, which will be used to apply the inversion rule

Then see the required CSS:

#invert {
transform: scaleX(-1);
}

Check out the return in the browser:

See that the second image is inverted in relation to the first

| Do you want to specialize in Web Development? Take a look at our course catalog.

So we can invert an image with CSS very simply and quickly

Note: be careful with old browsers that still don’t fully support transform

To do this, add the code as follows:

#invert {
 -moz-transform: scaleX(-1);
 -o-transform: scaleX(-1);
 -webkit-transform: scaleX(-1);
 transform: scaleX(-1);
}

With that, you can rest assured that the inversion code will work in these other browsers

It is always a good practice to check if the resource can be used, use the Can I Use website for this

Conclusion

In this article we learned how to invert an image with CSS only, that is, mirror an image or flip images

For this we just need to add the transform rule with the value of scaleX(-1)

Also, be careful with browsers that haven’t fully adapted to the transform.

Want to learn more about CSS? Click here!