How to flip background image using CSS?

Question

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

enter image description here

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

good question! this could come in handy in a lot of different instances. — AshBrad, Mar 23 '12 at 16:57
@AshBrad - Thanks for comments. yes it could be useful in many conditions — Jitendra Vyas, Mar 24 '12 at 06:05

alex · Answer 1 · 2014-05-14T10:54:12.183

277

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.

edited May 14 '14 at 10:54

answered Apr 24 '11 at 06:16

alex

479,566
201
878
984

1

If I'm only considering Web-kit browsers then only `-webkit-transform: scaleX(-1);` is enough? – Jitendra Vyas Apr 24 '11 at 06:32
@Jitendra It should be, plus the non vendor prefixed property. – alex Apr 24 '11 at 06:34
44

@alex - one problem in this. it's flipping the text also which is inside the `` and I only want to flip the background image. The code you give is to flip the whole element – Jitendra Vyas Apr 24 '11 at 06:41
4

@Jitendra It doesn't look like you can just flip the background image. You could place the icon in a `span` and then flip that, however. – alex Apr 24 '11 at 06:43
1

@alex - OK the if i use this code `
text

Jitendra Vyas

Apr 24 '11 at 06:47

@Jitendra You wouldn't do it that way, you'd put the icon in the span and do `a:visited span { ... }`. – alex Apr 24 '11 at 06:49

@alex - Please edit your jsfiddle example. I don't want to keep blank ` ` though. – Jitendra Vyas Apr 24 '11 at 06:50

@Jitendra If you don't want to make the compromise, you won't get it working in today's browsers. – alex Apr 24 '11 at 06:51

@alex- I'm only considering web-kit browsers. is it possible without using blank `span`? – Jitendra Vyas Apr 24 '11 at 06:53

@alex - I found a way without compromise. Thanks to you to give me a clue. – Jitendra Vyas Apr 24 '11 at 07:17

Also yay for [XY flipping](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#scale); `transform: scale(-1, -1);`, which is equal to `transform: scale(-1);`. – Joel Purra Nov 29 '13 at 14:46

@Claudio you didn't made any improvements to the answer in your edit. I don't know why some one approved this edit. – Ramaraj T May 14 '14 at 09:02

1

You can also apply `transform: scaleX(-1);` on all children elements to undo the mirroring for anything besides the background >:D – Klesun Nov 02 '21 at 12:11

score 117 · Accepted Answer · edited Jan 19 '19 at 19:12

117

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 class="prev"><a href="">Previous</a></div>
<div class="next"><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(https://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

See example here http://jsfiddle.net/qngrf/807/

edited Jan 19 '19 at 19:12

Rahil Wazir

10,007
11
42
64

answered Apr 24 '11 at 07:16

Jitendra Vyas

148,487
229
573
852

7

@Jitendra Can you please check Jsfiddle URL. I think it is not having the same code you posted in your answer + its not working.. – Sachin Jain Apr 03 '13 at 14:45
3

jsfiddle code you post is fliping text to? is it what you want, or just background image? – mandza Sep 11 '14 at 13:00
1

your jsfiddle is not the same as the code , can u please update it ? – Royi Namir Jun 07 '15 at 12:49
1

@JitendraVyas hello from 2016! I was considering suggesting an edit to fix the jsfiddle URL as it still links to different code than is in your answer here - care to edit the post or remove the link? Thanks :) – totallyNotLizards May 24 '16 at 14:22
`-webkit-transform:scaleX(-1);` for chrome – Wesley Smith Jul 27 '17 at 13:40

score 27 · Answer 3 · answered Jan 29 '14 at 22:06

According to w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

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.

Thanks for the answer! This one worked best for me, since the others either flipped all the children too or required a more complex trick to reverse the flip. — Austin Salgat, Nov 22 '15 at 20:06
If this answer does flip everything inside of your targetted element, just push it down into another element. In other words, wrap the content you do not want to be flipped inside of a new
element. — Onosa, Oct 25 '18 at 21:22

score 13 · Answer 4 · answered Apr 24 '11 at 14:04

13

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/

answered Apr 24 '11 at 14:04

Boris Zbarsky

34,758
5
52
55

score 6 · Answer 5 · answered Sep 20 '15 at 00:16

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 id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>

The "flip both vertical and horizontal at the same time" has the same effect as turning the image 180 degrees, works fine and is what I was looking for, — Stonecrusher, Apr 21 '16 at 12:53

How to flip background image using CSS?

5 Answers5

Linked