CSS makes flipping images easy.
Here's how you can flip an image horizontally:
img {
transform: scaleX(-1);
}
While this line alone will work in most modern browsers, the following is a more broadly compatible snippet that serves the same purpose:
img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
Flipping images vertically
You can also flip an image vertically in a similar fashion:
img {
transform: scaleY(-1);
}
Once again, I'd suggest adding some extra lines for compatibility with older browsers:
img {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
Flipping images diagonally
This process is really more of a rotation than a "flip", but the following code will turn an image by 90 degrees clockwise:
img {
transform: rotate(90deg);
}
This works for any degree value between zero and 360. Negative values are valid as well.
Conclusion
You can rotate other elements than just images using these snippets, but I typically find myself flipping images whenever I have to flip an element.
Thanks for reading.
Top comments (0)