CSS Flip Background Image Vertically & Horizontal

Learn how to flip background image using CSS? Is it possible? Yes! By using the transform: scaleX(-1); element we can easily reverse the image.

A few days back, I was working on a small project which requires to change the position of an icon on :visited. I was using the arrow image in the background-image inside the li.

I need to flip this arrow horizontally. It can easily be done by making another image of the arrow and then change it on :visited but I don’t like that.

Mirror Background Image CSS

The possible scenario for creating a mirror background image is having only one graphic for an “arrow” but flipping it to point in different directions.

.flipped img {
  transform: scaleX(-1);
}

But the issue with the transform property isn’t working well with an older vendor. The solution to this problem is prefixed.

.flipped img {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

If you want to vertically flip instead…

.flipped img {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

The elements of CSS3 are really powerful and you can easily create attractive effects to images. You can easily solve complicated CSS issues using a few lines of code.

Normally, we have seen that the effects like flip can only be done using JavaScript but with the help of transform property we can easily do that.

How to Flip Background Image

So we are able to learn that we can easily flip the image by using the transform property. By setting the scaleX or scaleY we can make it flip horizontally and vertically.

Now let’s apply the property to flip the background image.  I will create previous/next buttons and then apply the background icon.

In our below markup, we have flipprev and flipnext. Both define a simple anchor link.

<div class="flipprev">
   <a href="#">Previous</a>
</div>
<div class="flipnext">
   <a href="#">Next</a>
</div>

Write CSS Styling

To make the demo look nice, I will set background color and define padding. Also, let’s place both divs side-by-side by using the float element.

.flipnext a, .flipprev a {
    background:#fff;
    padding: 10px 30px;
}
 .flipnext {
    float:left;
}
 .flipprev {
    float:right;
}

With the help of :before element we can easily set the background icon to stay at the left of the button’s text.

You notice, I am using the right-arrow in the background which means, currently both icons arrow position is on the right side.

I will flip the next icon to the left side when I will apply transform property in the next and last step.

 .flipprev a:before, .flipnext a:before {
    content:"";
    width:24px;
    height:24px;
    margin:0 5px 0 0;
    background:url(right-arrow.png) no-repeat 0 0;
    display:inline-block ;
    vertical-align:middle;
}

Finally and last most important part to flip the icon. We will flip the next icon by using the transform:scaleX(-1);

.flipnext a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

That’s It! We are done. Check out the demo of CSS flip background image and download source code.