Flip / mirror an image horizontally + vertically with css

Question

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

Answer 1

Try this:

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

Snippet:

ul {
  list-style: none;
}

.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: scale(-1, -1);
  -o-transform: scale(-1, -1);
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

<ul>

  <li>
    Original <br>
    <img src="//i.imgur.com/8kWBuwm.jpg" class="" height="100" alt="">
  </li>

  <li>
    <hr>
  </li>

  <li>
    Flip Horizontal <br>
    <img src="//i.imgur.com/8kWBuwm.jpg" class="img-hor" height="100" alt="">
  </li>

  <li>
    <hr>
  </li>

  <li>
    Flip Vertical <br>
    <img src="//i.imgur.com/8kWBuwm.jpg" class="img-vert" height="100" alt="">
  </li>

  <li>
    <hr>
  </li>

  <li>
    Flip Verical + Horizontal <br>
    <img src="//i.imgur.com/8kWBuwm.jpg" class="img-hor-vert" height="100" alt="">
  </li>

</ul>

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.