CSS tip: flipping elements

Liam Newmarch
Jul 25, 2018 · 1 min read

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:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade