Flipping Images in CSS

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.