DEV Community

Nathan
Nathan

Posted on • Originally published at natclark.com

Flipping Images in CSS

CSS makes flipping images easy.

Here's how you can flip an image horizontally:

img {
    transform: scaleX(-1);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Flipping images vertically

You can also flip an image vertically in a similar fashion:

img {
    transform: scaleY(-1);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)