Comment retourner l'image d'arrière-plan en utilisant CSS?

Comment retourner une image d'arrière-plan en utilisant CSS? C'est possible?

actuellement j'utilise cette image de flèche dans un background-imagede licss

On: visitedJe dois retourner cette flèche horizontalement. Je peux le faire pour faire une autre image de flèche MAIS je suis juste curieux de savoir s'il est possible de retourner l'image en CSS pour:visited

Vous pouvez le retourner horizontalement avec CSS ...

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

jsFiddle .

Si vous voulez retourner verticalement à la place ...

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

Source .

J'ai trouvé que je ne pouvais retourner que l'arrière-plan et non l'élément entier après avoir vu un indice à retourner dans la réponse d'Alex. Merci alex pour ta réponse

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

Voir l'exemple ici http://jsfiddle.net/qngrf/807/

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

La propriété transform est prise en charge dans Internet Explorer 10, Firefox et Opera. Internet Explorer 9 prend en charge une alternative, la propriété -ms-transform (transformations 2D uniquement). Safari et Chrome prennent en charge une alternative, la propriété -webkit-transform (transformations 3D et 2D). Opera prend uniquement en charge les transformations 2D.

Il s'agit d'une transformation 2D, donc cela devrait fonctionner, avec les préfixes des fournisseurs, sur Chrome, Firefox, Opera, Safari et IE9 +.

Autres réponses utilisées: avant de l'empêcher de retourner le contenu intérieur. J'ai utilisé ceci sur mon pied de page (pour refléter verticalement l'image de mon en-tête):

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

Vous finissez donc par retourner l'élément, puis en retournant tous ses enfants. Fonctionne également avec les éléments imbriqués.

Pour ce que cela vaut, pour les navigateurs basés sur Gecko, vous ne pouvez pas conditionner cette chose en :visitedraison des fuites de confidentialité qui en résultent. Voir http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

Vous pouvez inverser à la fois verticalement et horizontalement en même temps

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

Et avec la propriété de transition , vous pouvez obtenir un flip cool

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

En fait, il retourne l' élément entier , pas seulement lebackground-image

FRAGMENT

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>