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

    Code

    .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);

}
    <div class="prev"><a href="">hello</a></div>
<div class="next"><a href="">hello</a></div>