Come capovolgere l'immagine di sfondo usando i CSS?

Come capovolgere qualsiasi immagine di sfondo usando CSS? È possibile?

attualmente sto usando questa immagine di freccia in a background-imagedi liin css

On: visitedDevo girare questa freccia in senso orizzontale. Posso fare questo per creare un'altra immagine della freccia, ma sono solo curioso di sapere se è possibile capovolgere l'immagine nel CSS:visited

Puoi capovolgerlo in orizzontale con CSS ...

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

jsFiddle .

Se invece vuoi capovolgere verticalmente ...

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

Fonte .

Ho trovato il modo di capovolgere solo lo sfondo non l'intero elemento dopo aver visto un indizio per capovolgere la risposta di Alex. Grazie alex per la tua risposta

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

Vedi esempio qui http://jsfiddle.net/qngrf/807/

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

La proprietà transform è supportata in Internet Explorer 10, Firefox e Opera. Internet Explorer 9 supporta un'alternativa, la proprietà -ms-transform (solo trasformazioni 2D). Safari e Chrome supportano un'alternativa, la proprietà -webkit-transform (trasformazioni 3D e 2D). Opera supporta solo trasformazioni 2D.

Questa è una trasformazione 2D, quindi dovrebbe funzionare, con i prefissi del fornitore, su Chrome, Firefox, Opera, Safari e IE9 +.

Altre risposte utilizzate: prima di impedirgli di capovolgere il contenuto interno. L'ho usato sul mio piè di pagina (per specchiare verticalmente l'immagine dalla mia intestazione):

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

Quindi finisci per capovolgere l'elemento e poi ri-capovolgere tutti i suoi figli. Funziona anche con elementi nidificati.

Per quello che vale, per i browser basati su Gecko non è possibile condizionare questa cosa a :visitedcausa delle conseguenti perdite di privacy. Vedi http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

È possibile capovolgere sia verticale che orizzontale allo stesso tempo

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

E con la proprietà di transizione puoi ottenere un bel capovolgimento

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

In realtà, capovolge l' intero elemento, non solo ilbackground-image

FRAMMENTO

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>