Code Snippets Gallery
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.
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.
Perfect – finally – excellent! Is this a CSS3-only property? What is the cross-browser compatibility of this?