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


224

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

entrez la description de l'image ici

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


3
bonne question! cela pourrait être utile dans de nombreux cas différents.
AshBrad

@AshBrad - Merci pour vos commentaires. oui, cela pourrait être utile dans de nombreuses conditions
Jitendra Vyas

Réponses:


234

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 .


1
Si je ne considère que les navigateurs Web-Kit, alors -webkit-transform: scaleX(-1);c'est suffisant?
Jitendra Vyas

@Jitendra Cela devrait être, plus la propriété préfixée non fournisseur.
alex

25
@alex - un problème dans ce domaine. il retourne également le texte qui est à l'intérieur du <a>et je veux seulement retourner l'image d'arrière-plan. Le code que vous donnez est de retourner tout l'élément
Jitendra Vyas

3
@Jitendra Il ne semble pas que vous puissiez simplement retourner l'image d'arrière-plan. Vous pouvez cependant placer l'icône dans un span, puis inverser cela.
alex

1
@alex - OK, si j'utilise ce code, <li><a href="#"><span>text</span></a></li>il retourne aussi le texte, donc ce qui sera opposé à votre code de donner pour déverrouiller le texte afin que je puisse écrire du code pour déverrouiller li a span { }en css
Jitendra Vyas

86

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/


7
@Jitendra Pouvez-vous s'il vous plaît vérifier l'URL de Jsfiddle. Je pense qu'il n'a pas le même code que vous avez posté dans votre réponse +
ça

3
le code jsfiddle que vous publiez est en train de retourner du texte? c'est ce que vous voulez, ou juste une image de fond?
mandza

1
votre jsfiddle n'est pas le même que le code, pouvez-vous le mettre à jour?
Royi Namir

1
@JitendraVyas bonjour de 2016! J'envisageais de suggérer une modification pour corriger l'URL de jsfiddle car elle est toujours liée à un code différent de celui indiqué dans votre réponse ici - vous voulez modifier la publication ou supprimer le lien? Merci :)
totallyNotLizards

-webkit-transform:scaleX(-1);pour chrome
Wesley Smith

19

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.


1
Merci d'avoir répondu! Celui-ci a fonctionné le mieux pour moi, car les autres ont retourné tous les enfants aussi ou ont nécessité un tour plus complexe pour inverser le retournement.
Austin Salgat

Si cette réponse retourne tout à l'intérieur de votre élément ciblé, enfoncez-le simplement dans un autre élément. En d'autres termes, encapsulez le contenu que vous ne souhaitez pas retourner à l'intérieur d'un nouvel élément <div>.
Onosa


5

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>


Le "retournement à la fois vertical et horizontal en même temps" a le même effet que de tourner l'image à 180 degrés, fonctionne très bien et c'est ce que je cherchais,
Stonecrusher
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.