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

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

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   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   lt div id  myDiv  gt Some content here lt  div gt  x000D   x000D   lt button onclick  flip    gt Click to flip lt  button gt  x000D   x000D   x000D

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

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

[css] How to flip background image using CSS?

Examples related to css

Examples related to mobile-webkit