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 do

Answer 1

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/