You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions.
.flip-horizontally {
transform: scaleX(-1);
}
See how one arrow is used to point both directions here:
See the Pen
Flip an Image by CSS-Tricks (@css-tricks)
on CodePen.
Rotation is another possibility, meaning our one arrow could go lots of directions:
See the Pen
Flip an Image by CSS-Tricks (@css-tricks)
on CodePen.
This is any image too, or really any element at all.
See the Pen
Flip an Image by CSS-Tricks (@css-tricks)
on CodePen.
Old Vendor Prefixes
For posterity:
img {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
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 :)
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!
@Pat
-o- = opera
-moz- = firefox/mozilla
-webkit- = safari, chrome
-ms- = microsoft so IE & Edge
If you would apply this on a sprite image, would you need to reverse the coordinates as wel?
Nope. Transforms are applied after rendering of content, as the last step.
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?
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
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.
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.
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.
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.
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!
Thanks chris, It’s really useful.
Useful information.
thank you
Verry good and usefull consept.
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
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.
“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
Spot on. Thanks for the trick.
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
it’s scale(-1) now
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):
Hope that helps anyone with a similar issue.
Thanks for posting this fix!
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?
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
what’s wrong with transform: rotateY(180deg) ?
Sometimes you don’t need just the rotation. You need a mirror reflection and flipping it does the trick
Here is my example of flipping a div vertically
https://uisnip.appspot.com/?share=/s/9tjc3v4b5wt6mcm/VerticalFlip-2?dl=0
Thanks! It’s the easyest and lightest way to flip an element I found on the net. Congratulations.
Elegant snip of CSS, thank you :)
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/
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
Nice script. Work – 100%! Thank’s ⇨✪✪✪✪✪
Cool! 100% work in my blog (#firefox#)
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?
Thanks! It’s so easy to implement. Used it to flip horizontally a font awesome icon and it worked!
Works for any element, even video.
How do I use this, BUT only for certain images? Using this rotates ALL my images on the webpage, and I want this to happen only for certain ones.
Hey Paul! Try using a unique class instead of the general img selector. For example, replace “img” with something like “.image-flip” and add that class name to the images you want flipped. :)
You can use: transform: rotateY(180deg);