Grow your CSS skills. Land your dream job.

Last updated on:

Flip an Image

You can flip images with CSS! Possible scenario: having only one graphic for an "arrow", but flipping it around to point in different directions.

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

Demo

Unflipped

Flipped

Comments

  1. Can this be applied to background-images? If so, it’d be perfect for stuff like buttons and shadowed boxes.

    • Daan
      Permalink to comment#

      but you can apply it on a div with a bg image :)

    • Permalink to comment#

      which line is for what browser?

      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      filter: FlipH;
      -ms-filter: “FlipH”;

      but seriously, MS should just scrap IE all together and make life a little easier.
      Thanks!

  2. If you would apply this on a sprite image, would you need to reverse the coordinates as wel?

  3. It cannot be applied to background images. Only elements.

    • actually it can be applied to background images … i did test it and it worked fine with
      -Fire Fox 3.6.13
      -Chrome 8.0.552.237
      -IE 8.0.7600

      PS: when using the IE it shows the “ActiveX” information bar at top of the page asking the user to Allow the Blocked Content other wise it’ll just show the none flipped version of the background image.. which is very annoying and could scare users away from the site thinking it’s trying to download some hidden script :)

    • Also I’d like to add that when you use the Flipping for background images it doesn’t only Flip the “background-image” but also it flips it’s “background-position” for Both the ” X” and “Y” Values so you’ll have to reverse those too :)

    • Glaudston
      Permalink to comment#

      How did you flip just the background?

  4. When viewed in RSS reader, the flipped image is not flipped :)

    • Same here ;) (Apple Mail app)

    • Right… that’s because the CSS is applied here on the demo page. RSS readers apply their own CSS to their pages. If you want to try and force your CSS into them, you’ll have to use inline styles and even then it’s no guarantee.

  5. Bert de Vries

    How about using this for a reflection? Flip an image vertically and reduce the opacity? Possible?

  6. Too bad you don’t give Gijs Stegehuis the credits it..

  7. Gijs Stegehuis

    I needed ‘image-rendering: -moz-crisp-edges;’ for this to work properly with a gif arrow in Firefox on OSX. Without this property it was rendered very blurry.

  8. Andrew
    Permalink to comment#

    Perfect – finally – excellent! Is this a CSS3-only property? What is the cross-browser compatibility of this?

  9. Permalink to comment#

    This would be good for a members site as a log out page. Make the log out page a flipped version of the log in page. Or some variation of the idea. Maybe even a picture on the log in page can be flipped on the log out page. Just a thought.

  10. This isn’t working for me in IE8. The image isn’t flipped.

    Also, in IE8-compability-mode, the image is actually flipped, but when animating the top-position using jQuery, the image hides when my image “jumps” (I’ve made Kriby run back and forward on the screen, jumping when clicked). Not that the image hides only when flipped.

  11. This would actually have good applications with an international website that had to switch between Left-to-Right and Right-to-Left formatting. Most websites are terrible at having a proper Right-to-left UX for Arabic & Hebrew.

  12. Hi all,

    I am using this CSS code to flip a png image with transparent background, and I’m getting a horrible result (on IE 7, 8 or 9).

    After flipping, image gets a kind of crooked black outline… Any suggestion?

    Cheers,

  13. Here’s if you want an image that flips as a transition:

    img { display: block; height: 400px; width: 400px; -webkit-transition: all 1s; }

    img:hover { display: block; eight: 400px; width: 400px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; -webkit-transition: all 1s; }

  14. Sorry:


    img {
    display: block;
    height: HEIGHT OF YOUR IMAGE;
    width: WIDTH OF YOUR IMAGE;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    }

    img:hover {
    display: block;
    height: HEIGHT OF YOUR IMAGE;
    width: WIDTH OF YOUR IMAGE;
    IMAGE FLIP CODE
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    }

    Tested, and it works

  15. Velmurugan

    This is really very nice..

  16. kikito
    Permalink to comment#

    If we combine this with :after, this can probably be used to generate pure CSS reflections with non-webkit browsers.

  17. Permalink to comment#

    Very very good…. thanks

  18. Amit Deshmukh
    Permalink to comment#

    Thanks buddy,
    I was searching for the same and after googling it all I was getting is that Flip slide show and all, Thanks a lot for this trick …

  19. Wow, Great article. I’ve used your code to rotate background image and it’s work fine.
    Thanks for sharing nice article.

  20. bala
    Permalink to comment#

    I need to break an image and also it should gather again.Else is there anything new that we can do only with CSS initial version.Give Me some ideas dude.

  21. Do you mean like an explosion ?
    With JavaScript (and JQuery) you could easily create some small blocks with your image in background (and background-position depending on where each block is), then move each block independently (and even rotate it with css transforms) to make it look like what you want.
    Then, gathering them again should also be quite easy.

    Do you see what I mean ?
    Without JavaScript, I don’t think this is possible. I mean, it’s quite a specific situation, and it would be incredible to have a CSS-only solution.

  22. Tricia Kennedy

    My flipped image renders blurry for some reason? strange, but otherwise great trick.

  23. Vinay Prajapati
    Permalink to comment#

    Very Nice!

  24. seshu
    Permalink to comment#

    can we apply horizontal flip effect to vertically fliped image i.e what we get when we apply horizontal flip in vertical direction.

  25. Permalink to comment#

    in IE ONLY, (filter: FlipH; -ms-filter: “FlipH”; ) causes a black background IF (and here is the weird part) the parent layered div has css rounding elements applied. (in IE, my class =’round’ was -ms-border-radius:20px; ). Keep it in mind if you are spending 5 hours looking for a ‘it went black’ bug in IE. I removed the rounding class, and no blackness. Odd.

  26. Grinn
    Permalink to comment#

    What I want to know: WTF are Asia Mustards?

  27. Elliott Bailey

    Thanks mate – just what I was after!

  28. Ramesh Chowdarapally
    Permalink to comment#

    Thanks chris, It’s really useful.

  29. Ramesh Chowdarapally
    Permalink to comment#

    Useful information.
    thank you

  30. Manish Kanp
    Permalink to comment#

    Verry good and usefull consept.

  31. Permalink to comment#

    Hello, thanks for your article.
    I’m using this but on Y axe
    I would love to know if its possible -and how- making this effect with a scroll.

    i mean, the image reverse when i scroll down.
    Any idea ?
    Thanks

  32. This is a good practice, we could use it to flip images, icons, and also for icon fonts!

    For flipping background, I can till this flip all the element, not just graphic inside it, so you couldn’t use it to flip just backgrounds, it will flip text also!

    Unfortunately, we will need to wait some extra time “may be months, may be years” to relay on it, as for now there are a lot of people uses IE8 to brows websites.

  33. “Mirror Tube”
    Paste any Youtube or vimeo video urls ,and you can see them with horizontally-flipped version(It not work on mobile and internet explorer).

    http://concreteage.blogspot.jp/p/youtubevimeourl-function-youtube-this.html

  34. Prazi
    Permalink to comment#

    Spot on. Thanks for the trick.

  35. Ikuzou Miyashita
    Permalink to comment#

    Hi

    Recently, I updated “Mirrortube”.
    It became able to play any Youtube or Vimeo video in monochrome.
    please check it.

    MirrorTube

    http://concreteage.blogspot.jp/p/youtubevimeourl-function-youtube-this.html

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".