How to flip any background image using CSS? Is it possible?
currenty I'm using this arrow image in a background-image
of li
in css
On :visited
I need to flip this arrow horizontally. I can do this to make another image of arrow BUT I'm just curious to know is it possible to flip the image in CSS for :visited
I found I way to flip only the background not whole element after seeing a clue to flip in Alex's answer. Thanks alex for your answer
HTML
CSS
See example here http://jsfiddle.net/qngrf/807/
For what it's worth, for Gecko-based browsers you can't condition this thing off of
:visited
due to the resulting privacy leaks. See http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/According to w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp
This is a 2D transform, so it should work, with the vendor prefixes, on Chrome, Firefox, Opera, Safari, and IE9+.
Other answers used :before to stop it from flipping the inner content. I used this on my footer (to vertically-mirror the image from my header):
HTML:
CSS:
So you end up flipping the element and then re-flipping all its children. Works with nested elements, too.
You can flip it horizontally with CSS...
jsFiddle.
If you want to flip vertically instead...
Source.
You can flip both vertical and horizontal at the same time
And with the transition property you can get a cool flip
Actually it flips the whole element, not just the
background-image
SNIPPET