Flip / mirror an image horizontally + vertically with CSS

html

responsive-design

css

tailwindcss

byAnton Shumikhin·Feb 7, 2025

Achieve a horizontal flip of an image by applying CSS transform: scaleX(-1);. For a vertical flip, use transform: scaleY(-1);. To perform both flips simutaneously and create a full mirror effect, combine the two: transform: scale(-1, -1);.

/* When pancake flipping isn't enough */
.img-flip-h { transform: scaleX(-1); }

/* For when the world is upside down */
.img-flip-v { transform: scaleY(-1); }

/* Create your own mirror universe */
.img-flip-both { transform: scale(-1, -1); }

Then, add the class to your image:

<img src="image.jpg" class="img-flip-h">
<img src="image.jpg" class="img-flip-v">
<img src="image.jpg" class="img-flip-both">

Compatibility across different browsers

Confirm your flip effects function across all browsers. When dealing with legacy browsers such as Internet Explorer, include the -ms-transform property or utilize the filter property as an alternative approach. Below are the snippets:

/* Children of Internet Explorer 9, rejoice */
.img-flip-h { -ms-transform: scaleX(-1); }
.img-flip-v { -ms-transform: scaleY(-1); }
.img-flip-both { -ms-transform: scale(-1, -1); }

/* For beings still in the Dark Ages (IE 8 and below) */
.img-flip-h { filter: fliph; }
.img-flip-v { filter: flipv; }
.img-flip-both { filter: fliph flipv; }

Important to note: The filter property, though effective, isn't recognized as standard CSS.

TailwindCSS counterparts

Implementing flip effects is made simpler for those using TailwindCSS. Simply include the relevant utility classes:

<!-- Like flipping a pancake -->
<img src="image.jpg" class="transform -scale-x-100">

<!-- Like reading a book upside down -->
<img src="image.jpg" class="transform -scale-y-100">

<!-- For mirroring image or creating a world upside down -->
<img src="image.jpg" class="transform -scale-x-100 -scale-y-100">

Comprehending rotation and flips

Flipping of images can also be executed through rotation. A transform: rotate(180deg); rotates the image 180 degrees, resulting visually in a horizontal and vertical flip. However, this method doesn't technically flip the image along its axes, so be sure to choose it judiciously.

/* Like spinning a pizza dough */
.img-rotate-180 { transform: rotate(180deg); }

Techniques for advanced flipping

Access control and complexity in your flipping by resorting to matrix transformations in CSS when you want to flip an element which already has transformations applied:

/* By Matrix, we don't mean Keanu Reeves */
.img-advanced-flip {
  transform: matrix(-1, 0, 0, -1, 0, 0);
}

The matrix transformation is essentially a combination of multiple transformations that doesn't override previous transform properties, as it would if you used individual rotate, scale, skew, etc., which is crucial for building interactive UIs.

Troubles with combining flips

There may be cases when combining horizontal and vertical flips may lead to unexpected results. This is usually due to an incorrect transform stacking order or misunderstanding of how CSS applies multiple transformations. Conduct an analysis of your existing CSS to locate and correct these issues.

Flipping background images

Flipping background images takes a slightly different approach versus standard img tags. The related background properties need to be set appropriately:

/* Reflecting your alter ego */
.flip-background {
  background-image: url('your-image.jpg');
  transform: scale(-1, -1);
  background-size: cover;
  background-repeat: no-repeat;
}