92

Im trying to flip an image to display it 4 ways : original (no changes), flipped horizontally, flipped vertically, flipped horizontally + verticly.

To do this Im doing the below, it works fine apart from the flip horizontally + vertically, any idea why this wouldnt be working ?

Ive made a JS fiddle of the issue here : 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";
}
sam
  • 9,486
  • 36
  • 109
  • 160

4 Answers4

128

Try this:

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

Updated fiddle: https://jsfiddle.net/7vg2tn83/1/

It wasn't working before because you were overriding the transform in your css. So instead of doing both, it just did the last one. Sort of like if you did background-color twice, it would override the first one.

Platte Gruber
  • 2,935
  • 1
  • 20
  • 26
28

To perform a reflection you can use, the transform CSS property along with the rotate() CSS function in this format:

transform: rotateX() rotateY();

The function rotateX() will rotate an element along the x-axis and the function rotateY() will rotate an element along the y-axis. I find my approach intuitive in that one can visualize the rotation mentally. In your example, the solution using my approach would be:

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

The JS fiddle to demonstrate the solution is https://jsfiddle.net/n20196us/1/

Edmond Weiss
  • 471
  • 5
  • 11
16

You may do a transform: rotate(180deg); for the horizontal+vertical flip.

Exil
  • 311
  • 2
  • 11
  • 26
Frank Rem
  • 3,632
  • 2
  • 25
  • 37
  • 6
    This would only work on symmetrical images. Since you'd be rotating and not flipping the image. E.g.: take the letter (d). Rotating: d | p. Flipping: d | b. – warkentien2 Oct 23 '18 at 19:21
  • 5
    @warkentien2 Flip it horizontal+vertical as asked by OP. – Frank Rem Oct 24 '18 at 14:31
3

You can apply only a single transform rule for any selector. Use

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

I am unsure which IE will accept multiple filters though.

Victor - Reinstate Monica
  • 1,264
  • 9
  • 11