wake-up-neo.net

Spiegeln / spiegeln Sie ein Bild horizontal + vertikal mit CSS

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

Um dies zu tun, mache ich das Folgende, es funktioniert gut, abgesehen von dem horizontalen + vertikalen Flip. Irgendeine Idee, warum dies nicht funktionieren würde?

Ich habe hier eine JS-Fiedel gemacht: 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";
}
htmlcsstransformcss-filters
42
sam

Versuche dies:

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

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

Es hat vorher nicht funktioniert, weil Sie transform in Ihrem CSS überschrieben haben. Anstatt beides zu tun, war es nur der letzte. So ähnlich, als hättest du background-color zweimal würde es das erste überschreiben.

62
pgruber

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

12
Frank Rem

Um eine Reflexion durchzuführen, können Sie die CSS-Eigenschaft transform zusammen mit der CSS-Funktion rotate () in folgendem Format verwenden:

transform: rotateX() rotateY();

Die Funktion rotateX () dreht ein Element entlang der x-Achse und die Funktion rotateY () dreht ein Element entlang der y-Achse. Ich finde meinen Ansatz intuitiv, indem man die Rotation mental visualisieren kann. In Ihrem Beispiel wäre die Lösung mit meinem 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 JS-Geige, um die Lösung zu demonstrieren, ist https://jsfiddle.net/n20196us/1/

9
Edmond Weiss

Sie können für jeden Selektor nur eine einzige Transformationsregel anwenden. 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 mir nicht sicher, welcher IE mehrere Filter akzeptiert.

3
Victor