web-dev-qa-db-fra.com

Comment retourner l'image de fond en utilisant CSS?

Comment retourner une image de fond en utilisant CSS? C'est possible?

currenty j'utilise cette image de flèche dans un background-image de li dans css

enter image description here

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

csscss3mobile-webkit
209
Jitendra Vyas

J'ai trouvé moyen d'inverser uniquement l'arrière-plan, pas l'élément entier, après avoir trouvé un indice permettant d'inverser 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 exemple ici http://jsfiddle.net/qngrf/807/

74
Jitendra Vyas

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 .

216
alex

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

La propriété de transformation 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 ne prend en charge que les transformations 2D.

Il s’agit d’une transformation 2D et devrait donc fonctionner avec les préfixes du fournisseur, sur Chrome, Firefox, Opera, Safari et IE9 +.

Autres réponses utilisées: avant de l'empêcher de retourner le contenu interne. Je l'ai utilisé sur mon pied de page (pour refléter verticalement l'image depuis 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 à nouveau tous ses enfants. Fonctionne également avec des éléments imbriqués.

17
jdforsythe

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

11
Boris Zbarsky

Vous pouvez retourner les deux verticales et horizontales 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é 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 le background-image

EXTRAIT

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>
5
Fi Ras