Inverser/mettre en miroir une image horizontalement + verticalement avec css

Question

En essayant de retourner une image pour l'afficher 4 façons: original (pas de changement), retourné horizontalement, retourné verticalement, retourné horizontalement + verticalement.

Pour ce faire Im ci-dessous, il fonctionne bien en dehors de la bascule horizontalement + verticalement, aucune idée pourquoi cela ne fonctionnerait pas?

Ive a fait un violon JS de la question ici: https://jsfiddle.net/7vg2tn83/

.img-hor { 
     -moz-transform: scaleX(-1); 
     -o-transform: scaleX(-1); 
     -webkit-transform: scaleX(-1); 
     transform: scaleX(-1); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 
} 

.img-vert { 
     -moz-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
     -webkit-transform: scaleY(-1); 
     transform: scaleY(-1); 
     filter: FlipV; 
     -ms-filter: "FlipV"; 
} 

.img-hor-vert { 
     -moz-transform: scaleX(-1); 
     -o-transform: scaleX(-1); 
     -webkit-transform: scaleX(-1); 
     transform: scaleX(-1); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 

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

Answer 1

Essayez ceci:

.img-hor-vert { 
    -moz-transform: scale(-1, -1); 
    -o-transform: scale(-1, -1); 
    -webkit-transform: scale(-1, -1); 
    transform: scale(-1, -1); 
} 

violon Mise à jour: https://jsfiddle.net/7vg2tn83/1/

Il ne fonctionnait pas avant parce que vous surchargez la transform dans votre css. Donc, au lieu de faire les deux, il a juste fait le dernier. Un peu comme si vous l'aviez fait deux fois, cela remplacerait le premier.

Answer 2

Vous pouvez appliquer une seule règle de transformation pour tout sélecteur. Utilisez

.img-hor-vert { 
    -moz-transform: scaleX(-1) scaleY(-1); 
    -o-transform: scaleX(-1) scaleY(-1); 
    -webkit-transform: scaleX(-1) scaleY(-1); 
    transform: scaleX(-1) scaleY(-1); 
    filter: FlipH FlipV; 
    -ms-filter: "FlipH FlipV"; 
} 

Je ne suis pas sûr que IE acceptera plusieurs filtres bien.

Answer 3

Vous pouvez faire un transform: rotate(180deg); pour la bascule horizontale + verticale.

Answer 4

Pour effectuer une réflexion que vous pouvez utiliser, la transformation propriété CSS avec le rotate() fonction CSS dans ce format:

transform: rotateX() rotateY(); 

La fonction rotateX() tournera un élément le long de l'axe des x et la fonction rotateY() fera tourner un élément le long de l'axe y. Je trouve mon approche intuitive en ce sens que l'on peut visualiser la rotation mentalement. Dans votre exemple, la solution en utilisant mon approche serait:

.img-hor { 
    transform: rotateY(180deg); // Rotate 180 degrees along the y-axis 
} 

.img-vert { 
    transform: rotateX(180deg); // Rotate 180 degrees along the x-axis 
} 

.img-hor-vert { 
    transform: rotateX(180deg) rotateY(180deg); // Rotate 180 degrees on both 
} 

Le violon JS pour démontrer la solution est https://jsfiddle.net/n20196us/1/