How to flip background image using CSS?

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

2

5 Answers

You can flip it horizontally with CSS...

a:visited { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";
}

jsFiddle.

If you want to flip vertically instead...

a:visited { -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV";
}

Source.

13

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

<div><a href="">Previous</a></div>
<div><a href="">Next</a></div>

CSS

.next a, .prev a { width:200px; background:#fff
} .next { float:left
} .prev { float:right
} .prev a:before, .next a:before { content:""; width:16px; height:16px; margin:0 5px 0 0; background:url() no-repeat 0 0; display:inline-block
} .next a:before { margin:0 0 0 5px; transform:scaleX(-1);
}

See example here

5

According to w3schools:

The transform property is supported in Internet Explorer 10, Firefox, and Opera. Internet Explorer 9 supports an alternative, the -ms-transform property (2D transforms only). Safari and Chrome support an alternative, the -webkit-transform property (3D and 2D transforms). Opera supports 2D transforms only.

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:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

CSS:

footer {
background:url(/img/headerbg.png) repeat-x 0 0;
/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}
/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

So you end up flipping the element and then re-flipping all its children. Works with nested elements, too.

2

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

0

You can flip both vertical and horizontal at the same time

 -moz-transform: scaleX(-1) scaleY(-1); -o-transform: scaleX(-1) scaleY(-1); -webkit-transform: scaleX(-1) scaleY(-1); transform: scaleX(-1) scaleY(-1);

And with the transition property you can get a cool flip

 -webkit-transition: transform .4s ease-out 0ms; -moz-transition: transform .4s ease-out 0ms; -o-transition: transform .4s ease-out 0ms; transition: transform .4s ease-out 0ms; transition-property: transform; transition-duration: .4s; transition-timing-function: ease-out; transition-delay: 0ms;

Actually it flips the whole element, not just the background-image

SNIPPET

function flip(){	var myDiv = document.getElementById('myDiv');	if (myDiv.className == 'myFlipedDiv'){	myDiv.className = '';	}else{	myDiv.className = 'myFlipedDiv';	}
}

#myDiv{ display:inline-block; width:200px; height:20px; padding:90px; background-color:red; text-align:center; -webkit-transition:transform .4s ease-out 0ms; -moz-transition:transform .4s ease-out 0ms; -o-transition:transform .4s ease-out 0ms; transition:transform .4s ease-out 0ms; transition-property:transform; transition-duration:.4s; transition-timing-function:ease-out; transition-delay:0ms;
}
.myFlipedDiv{ -moz-transform:scaleX(-1) scaleY(-1); -o-transform:scaleX(-1) scaleY(-1); -webkit-transform:scaleX(-1) scaleY(-1); transform:scaleX(-1) scaleY(-1);
}

<div>Some content here</div>
<button onclick="flip()">Click to flip</button>

1