Code Snippet
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
Can this be applied to background-images? If so, it’d be perfect for stuff like buttons and shadowed boxes.
If you would apply this on a sprite image, would you need to reverse the coordinates as wel?
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 :)
How did you flip just the background?
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.
How about using this for a reflection? Flip an image vertically and reduce the opacity? Possible?
Combine the opacity with a CSS3 gradient?
My prediction: YES. It will work perfectly in every browser except IE.
Too bad you don’t give Gijs Stegehuis the credits it..
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.
Thanks, I had this issue too.
Perfect – finally – excellent! Is this a CSS3-only property? What is the cross-browser compatibility of this?
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.
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.
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.
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,
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; }
can we possibly use these in animation? if so, how?
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
This is really very nice..
If we combine this with :after, this can probably be used to generate pure CSS reflections with non-webkit browsers.
Very very good…. thanks
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 …
Wow, Great article. I’ve used your code to rotate background image and it’s work fine.
Thanks for sharing nice article.
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.
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.
Oh. My message was for Bala. My bad.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.