Wie kann man ein Hintergrundbild mit CSS spiegeln?

Wie kann man ein Hintergrundbild mit CSS spiegeln? Ist es möglich?

Derzeit verwende ich dieses Pfeilbild in einem background-imagevon liin CSS

Ein: visitedIch muss diesen Pfeil horizontal drehen. Ich kann dies tun, um ein weiteres Bild des Pfeils zu erstellen, aber ich bin nur neugierig zu wissen, ob es möglich ist, das Bild in CSS umzudrehen:visited

Sie können es mit CSS horizontal spiegeln ...

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

jsFiddle .

Wenn Sie stattdessen vertikal spiegeln möchten ...

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

Quelle .

Ich fand heraus, dass ich nur den Hintergrund und nicht das ganze Element umdrehen konnte, nachdem ich einen Hinweis auf Alex 'Antwort gesehen hatte. Danke alex für deine antwort

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

Siehe Beispiel hier http://jsfiddle.net/qngrf/807/

Laut w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

Die Transformationseigenschaft wird in Internet Explorer 10, Firefox und Opera unterstützt. Internet Explorer 9 unterstützt eine Alternative, die Eigenschaft -ms-transform (nur 2D-Transformationen). Safari und Chrome unterstützen eine Alternative, die -webkit-transform-Eigenschaft (3D- und 2D-Transformationen). Opera unterstützt nur 2D-Transformationen.

Dies ist eine 2D-Transformation, daher sollte sie mit den Herstellerpräfixen unter Chrome, Firefox, Opera, Safari und IE9 + funktionieren.

Andere verwendete Antworten: Vorher, um zu verhindern, dass der innere Inhalt umgedreht wird. Ich habe dies in meiner Fußzeile verwendet (um das Bild aus meiner Kopfzeile vertikal zu spiegeln):

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

Am Ende drehen Sie das Element um und drehen dann alle untergeordneten Elemente erneut um. Funktioniert auch mit verschachtelten Elementen.

Für Gecko-basierte Browser können Sie dieses Ding :visitedaufgrund der daraus resultierenden Datenschutzlecks nicht konditionieren . Siehe http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

Sie können sowohl vertikal als auch horizontal gleichzeitig spiegeln

    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);

Und mit der Übergangseigenschaft können Sie einen coolen Flip bekommen

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

Eigentlich dreht es das ganze Element um, nicht nur dasbackground-image

SNIPPET

function flip(){
	var myDiv = document.getElementById('myDiv');
	if (myDiv.className == 'myFlipedDiv'){
		myDiv.className = '';
	}else{
		myDiv.className = 'myFlipedDiv';
	}
}

#myDiv{
  display:inline-block;
  width:200px;
  height:20px;
  padding:90px;
  background-color:red;
  text-align:center;
  -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;
}
.myFlipedDiv{
  -moz-transform:scaleX(-1) scaleY(-1);
  -o-transform:scaleX(-1) scaleY(-1);
  -webkit-transform:scaleX(-1) scaleY(-1);
  transform:scaleX(-1) scaleY(-1);
}

<div id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>