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