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.
but you can apply it on a div with a bg image :)
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.
No.
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.
My flipped image renders blurry for some reason? strange, but otherwise great trick.
Use
image-rendering: -moz-crisp-edges;as said by Gijs Stegehuis up there.Very Nice!
can we apply horizontal flip effect to vertically fliped image i.e what we get when we apply horizontal flip in vertical direction.
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.
What I want to know: WTF are Asia Mustards?
Thanks mate – just what I was after!