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    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

User · Answer

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

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

User · Answer

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

User · Answer

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

User · Answer

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    lt footer gt   lt p gt  lt a href  page  gt Footer Link lt  a gt  lt  p gt   lt p gt  amp copy  2014 Company lt  p gt   lt  footer gt    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

User · Answer

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   lt div class  prev  gt  lt a href    gt Previous lt  a gt  lt  div gt   lt div class  next  gt  lt a href    gt Next lt  a gt  lt  div gt    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 http   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

[css] How to flip background image using CSS?

Examples related to css

Examples related to mobile-webkit