Hoe kan ik een achtergrondafbeelding omdraaien met CSS?

Hoe kan ik een achtergrondafbeelding omdraaien met CSS? Is het mogelijk?

momenteel gebruik ik deze pijlafbeelding in een background-imagevan liin css

On :visitedIk moet deze pijl horizontaal omdraaien. Ik kan dit doen om een andere afbeelding van pijl te maken MAARIk ben gewoon benieuwd of het mogelijk is om de afbeelding in CSS om te draaien voor :visited

Antwoord 1, autoriteit 100%

Je kunt het horizontaal spiegelen met CSS…

a:visited {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsFiddle.

Als je in plaats daarvan verticaal wilt spiegelen…

a:visited {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

Bron.

Antwoord 2, autoriteit 39%

Ik vond een manier om alleen de achtergrond en niet het hele element om te draaien nadat ik een aanwijzing zag om in het antwoord van Alex om te draaien. Bedankt alex voor je antwoord

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.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

Zie hier een voorbeeld http://jsfiddle.net/qngrf/807/

3, Autoriteit 10%

Volgens W3SCHOOLS:
http://www.w3schools.com/cssref/css3_pr_transform.asp

De eigenschap Transforming wordt ondersteund in Internet Explorer 10, Firefox en Opera.
Internet Explorer 9 ondersteunt een alternatief, de MS-transformatie-eigenschap (alleen 2D-transformaties).
Safari en Chrome ondersteunen een alternatief, de eigenschap-Webkit-Transforming (3D en 2D-transformaties).
Opera ondersteunt alleen 2D-transformaties.

Dit is een 2D-transformatie, dus het moet werken, met de voorvoegsels van de verkoper, op Chrome, Firefox, Opera, Safari en IE9 +.

Andere antwoorden gebruikt: voordat u wilt stoppen om het innerlijke inhoud te draaien. Ik heb dit op mijn voettekst gebruikt (om het beeld van mijn koptekst verticaal te spiegelen):

HTML:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

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

Dus u loopt uiteindelijk het element aan en vervolgens al zijn kinderen opnieuw te draaien. Werkt ook met geneste elementen.

4, Autoriteit 5%

Voor wat het waard is, voor Gekko-gebaseerde browsers die je niet kunt voorwaarde dit ding van :visitedvanwege de resulterende privacylekken. Zie http://hacks.mozilla.org / 2010/03 / Privacy-gerelateerde veranderingen-coming-to-CSS-Vistited /