CSS: Mirror an Image

Hello!

To achieve that, we can employ scale() CSS function:

transform: scale() with negative scaling.

Syntax:

transform: scale(bothAxesScaling)

Or:

transform: scale(horizontalScaling, verticalScaling)

bothAxesScaling, horizontalScaling, and verticalScaling can be numbers or percentages.

For example:

/* Both axes (x and y) are scaled similarly. */ transform: scale(1.2); /* Both axes are scaled independently. */ transform: scale(1.2, 50%); transform: scale(-1, 0.25); /* And so on. */

There are also scaleX() and scaleY(). They are dedicated to each axis.

• transform: scaleX(number or percentage)

  Scales the element along the horizontal (x) axis.

• transform: scaleY(number or percentage)

  Scales the element along the vertical (y) axis.

In this post, let's simply try the scale() function.

---

Let's Try

I have a penguin image:

Then I flip the image horizontally:

➡️

transform: scale(-1, 1)

Or I flip it vertically:

➡️

transform: scale(1, -1)

For our information, img element is displayed inline by default. Therefore, we need to explicitly redefine it as inline-block. Since display: inline will not work with scale() function.

The HTML goes as such:

<style> .example-img { display: inline-block; } .x-mirror { transform: scale(-1, 1); } .y-mirror { transform: scale(1, -1); } </style> <!-- Original image. --> <img class="example-img" src="[URL]"> <!-- Add "x-mirror" class to mirror it horizontally. --> <img class="example-img x-mirror" src="[URL]"> <!-- Add "y-mirror" class to mirror it vertically. --> <img class="example-img y-mirror" src="[URL]">

This is what happens if we use both classes. ⬇️

➡️

Well. That.

The .y-mirror class overrides the .x-mirror one. ⬇️

---

Text

We can also use this method to play around with text — as long as we wrap the text with a display: inline-block or display: block element.

Er, essentially we will play with the wrapper element, not the text. But the text will be inside the element. So. 🤔 Hm.

Anyway.

Like this, the original text:

I am a text.

Flip it horizontally:

I am a text. ➡️ I am a text.

Flip it vertically:

I am a text. ➡️ I am a text.

The HTML:

<style> .example-text { display: inline-block; font-weight: bold; } .x-mirror { transform: scale(-1, 1); } .y-mirror { transform: scale(1, -1); } </style> <!-- Original text. --> <span class="example-text">I am a text.</span> <!-- Add "x-mirror" class to mirror it horizontally. --> <span class="example-text x-mirror">I am a text.</span> <!-- Add "y-mirror" class to mirror it vertically. --> <span class="example-text y-mirror">I am a text.</span>

---

The CSS transform

The CSS transform property has a pivot point or origin, called —

transform-origin.

If we don't define it, by default, transform will use the centre of the element.

---

Related Tool

I've made an emoji transformer tool on Port Raptor. You may want to try it. ⬇️

Emoji Transformer.

---

Thanks for visiting!