Flip an Image with CSS

  • follow us in feedly
Published March 7, 2013 by Brad Knutson
Flip Image CSS

I’ve already shown you how to perform CSS3 image reflections, but what about flipping the original image?

It seems almost overkill for CSS to include the ability to flip images, as it’s not terribly difficult for a designer to flip an image in Photoshop. At any rate, here is how to accomplish this effect.

CSS

img.flip {
        filter: FlipH;
        -ms-filter: "FlipH";
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
}

Unflipped image

Flipped image

The best part is this actually works with all modern browsers, including Internet Explorer 7 and up! (It’s possible this works with IE6 or older, but I don’t have an environment to test it on!)

What about flipping an image over the horizontal axis?

CSS

img.flip {
        filter: FlipV;
        -ms-filter: "FlipV";
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
}

Unflipped image

Flipped image

You might be wondering under what circumstances would this technique even be useful? Perhaps you have a need for left and right arrows, and want to reduce server load time by only loading one instance of the image into the DOM. At any rate, it’s pretty cool that CSS gives us this option, regardless of how useful it might be.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">