CSS tip: flipping elements
Sometimes, when building out a website you might come across the same icon in different orientations. A common example of this is when you have an arrow pointing left and an arrow pointing right which are otherwise identical. In situations like this you can use CSS transforms instead of serving two images.
A common pattern I see is to use transform: rotate
in CSS.
.next,
.previous {
background-image: url('/images/arrow.png');
}
.previous {
transform: rotate(180deg);
}
This works for images which are vertically symmetrical but for anything else the transformed icon will be upside down. For that reason, it’s a better practice to use transform: scaleX
or transform: scaleY
instead – that way your images will be natural mirror images:
.previous {
transform: scaleX(-1);
}
Check out this example to see it in action.