CSS tip: flipping elements

Sometimes when you’re building a web app there are icons and other bits of UI that are the same as other bits, but flipped.

Next and previous arrows are a good example of this. To save on bytes (and to some extent the hassle of creating images) it’s becoming increasingly common to export one image and create its flipped mirror by using the transform: rotate function in CSS.

.next,
.previous {
background-image: url('/images/arrow.png');
}
.previous {
transform: rotate(180deg);
}

This works for images that are vertically symmetrical but for anything else the result will be upside down. For that reason it’s a better practice to use transform: scaleX or transform: scaleY instead, this way your images will be natural mirror images.

.previous {
transform: scaleX(-1);
}

Check out this example to see what I mean:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store