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. User Avatar
    Pål Strøm

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

    • User Avatar
      Daan
      Permalink to comment#

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

    • User Avatar
      Pat
      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. User Avatar
    Jan-Marten de Boer

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

  3. User Avatar
    Jonathan Snook

    It cannot be applied to background images. Only elements.

    • User Avatar
      Kareem Ahmed
      Permalink to comment#

      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 :)

    • User Avatar
      Kareem Ahmed
      Permalink to comment#

      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 :)

    • User Avatar
      Glaudston
      Permalink to comment#

      How did you flip just the background?

    • User Avatar
      Ronnie
      Permalink to comment#

      But if you wrapped the entire body content into a parent container and set the image to the background, you can do that. I know this is an old post

  4. User Avatar
    Brian Lang

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

    • User Avatar
      Robin

      Same here ;) (Apple Mail app)

    • User Avatar
      Chris Coyier

      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.

    • User Avatar
      Nick Betting
      Permalink to comment#

      RSS readers and mail apps have their own way of interpreting html and css and usually only support some code. CSS often doesn’t work correctly. If you want to use the full power of CSS you’ll have to show your content in a modern browser.

  5. User Avatar
    Bert de Vries

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

  6. User Avatar
    Rick

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

  7. User Avatar
    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. User Avatar
    Andrew
    Permalink to comment#

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

  9. User Avatar
    Terry
    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.

    • User Avatar
      Njnjnheee
      Permalink to comment#

      No.

    • User Avatar
      Nick Betting
      Permalink to comment#

      I have no idea what you mean. Flip the login fields etc? And usually there is no log out page, you just click a button and are logged out.

  10. User Avatar
    Stefan Bergfeldt
    Permalink to comment#

    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. User Avatar
    Peter Conerly

    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. User Avatar
    Gustavo Vedotti
    Permalink to comment#

    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. User Avatar
    Billy Brown
    Permalink to comment#

    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. User Avatar
    Billy Brown
    Permalink to comment#

    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. User Avatar
    Velmurugan

    This is really very nice..

  16. User Avatar
    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. User Avatar
    Eduardo
    Permalink to comment#

    Very very good…. thanks

  18. User Avatar
    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. User Avatar
    Mahbub Alam Khan
    Permalink to comment#

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

  20. User Avatar
    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. User Avatar
    Bali Balo
    Permalink to comment#

    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. User Avatar
    Tricia Kennedy

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

  23. User Avatar
    Vinay Prajapati
    Permalink to comment#

    Very Nice!

  24. User Avatar
    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. User Avatar
    dako
    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. User Avatar
    Grinn
    Permalink to comment#

    What I want to know: WTF are Asia Mustards?

  27. User Avatar
    Elliott Bailey

    Thanks mate – just what I was after!

  28. User Avatar
    Ramesh Chowdarapally
    Permalink to comment#

    Thanks chris, It’s really useful.

  29. User Avatar
    Ramesh Chowdarapally
    Permalink to comment#

    Useful information.
    thank you

  30. User Avatar
    Manish Kanp
    Permalink to comment#

    Verry good and usefull consept.

  31. User Avatar
    geoffrey
    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. User Avatar
    Ahmed Khattab
    Permalink to comment#

    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. User Avatar
    Ikuzou Miyashita
    Permalink to comment#

    “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. User Avatar
    Prazi
    Permalink to comment#

    Spot on. Thanks for the trick.

  35. User Avatar
    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

  36. User Avatar
    randomguy
    Permalink to comment#

    it’s scale(-1) now

  37. User Avatar
    Yorick Brown
    Permalink to comment#

    I came across this code used for an arrow background image, which was made to point down or up according to class.

    FlipV worked for most browsers but it caused an issue in IE9, by displaying the arrow as both up and down, so it turned into a square!

    I fixed it by simply using transform (though I had to then reset the filter):

    .flipped.down  {
       -ms-transform: rotate(180deg); 
       -ms-filter: initial;
    }
    

    Hope that helps anyone with a similar issue.

  38. User Avatar
    Veli
    Permalink to comment#

    I have succesfully managed to flip an image when clicking on it. Thanks for the info! But how to flip it back? Changing the id value to “regular” doesn’t work. Don’t you have to make a CSS style for that too?

  39. User Avatar
    amine
    Permalink to comment#

    a flipping effect working in IE is visible on the website seeveeze. Cant post the url apparently, just search seeveeze in google http://www.seeveeze.com

  40. User Avatar
    Eugene

    what’s wrong with transform: rotateY(180deg) ?

    • User Avatar
      iamcastelli
      Permalink to comment#

      Sometimes you don’t need just the rotation. You need a mirror reflection and flipping it does the trick

  41. User Avatar
    Sumit Kapoor
    Permalink to comment#
  42. User Avatar
    Aîz
    Permalink to comment#

    Thanks! It’s the easyest and lightest way to flip an element I found on the net. Congratulations.

  43. User Avatar
    Adam
    Permalink to comment#

    Elegant snip of CSS, thank you :)

  44. User Avatar
    Anna
    Permalink to comment#

    Flip images already may ad value for it, but if there is a title or words on it, i think it is difficult to give any meaning for this image.
    http://www.highhdwallpapers.com/

  45. User Avatar
    Mary P.
    Permalink to comment#

    ou can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions.
    chasse au trésor dofus

  46. User Avatar
    Gedir
    Permalink to comment#

    Nice script. Work – 100%! Thank’s ⇨✪✪✪✪✪

  47. User Avatar
    Abah
    Permalink to comment#

    Cool! 100% work in my blog (#firefox#)

  48. User Avatar
    Carl Johnson
    Permalink to comment#

    This is not flipping the real image? It only shows the image flipped right? I tried a website online which flipped my pictures and upload to imgur. It was cool ( http://flippicture.com/). But I really wonder what’s the way they do it?? Anyone mind to enlighten me?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag