Flip / mirror an image horizontally + vertically with css
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.
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/