Jitendra Vyas Jitendra Vyas - 1 month ago 15
CSS Question

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

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

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