Spiegeln/Spiegeln eines Bildes horizontal + vertikal mit CSS

Question

Ich versuche, ein Bild zu spiegeln, um es auf 4 Arten anzuzeigen: Original (keine Änderungen), horizontal gekippt, vertikal gekippt, horizontal + vertikal gekippt.

Um dies zu tun Im tun die unten, es funktioniert gut abgesehen von der Flip horizontal + vertikal, jede Idee, warum dies würde nicht funktionieren?

Ive hat eine JS-Geige der Ausgabe hier: 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

Versuchen Sie folgendes:

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

Aktualisiert Geige: https://jsfiddle.net/7vg2tn83/1/

Es funktionierte nicht vor, weil Sie die transform in Ihrem CSS überschrieben wurden. Also anstatt beides zu tun, tat es nur das letzte. So ähnlich wie wenn du zweimal background-color hättest, würde es die erste überschreiben.

Answer 2

Sie gelten nur, kann eine einzelne Regel für jeden Wähler verwandeln. Verwenden

.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"; 
} 

Ich bin nicht sicher, welche IE obwohl mehrere Filter akzeptieren.

Answer 3

Sie können eine transform: rotate(180deg); für die horizontale + vertikale Flip machen.

Answer 4

Um eine Reflexion führen Sie verwenden können, die CSS-Eigenschaft verwandeln zusammen mit dem Drehen() CSS-Funktion in diesem Format:

transform: rotateX() rotateY(); 

Die Funktion rotateX() ein Element entlang der x-Achse drehen und Die Funktion rotateY() dreht ein Element entlang der y-Achse. Ich finde meine Herangehensweise intuitiv, indem ich die Rotation mental visualisieren kann. In Ihrem Beispiel wäre die Lösung meines Ansatz:

.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 
} 

Die Geige JS um die Lösung zu demonstrieren, ist https://jsfiddle.net/n20196us/1/