Flip / mirror an image horizontally + vertically with css

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 :

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

4 Answers

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:

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

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

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.