cssmobile-webkit

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

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

Solution

  • 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.sstatic.net/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/