Using CSS you can flip an image.

WHY FLIP AN IMAGE ?

————————————————————————————————————-
1. Minimizes the number of HTTP Requests.
2. Minimizes the loading time of the page.
3. Easy to use.
SCENARIO:

————————————————————————————————————–
Let us assume that you want to use a previous and a next image in your web page then you will use two different images, lets say the below two images.

So what are the alternative methods in which you can do it (without using two images)?
1. You can use a sprite which contains both the images, but apart from the that it will also work only as background images and not for image tag.
2. Or you can use a single image and can flip it to become the other one.
HOW TO FLIP AN IMAGE:

——————————————————————————
As i had already mentioned by using CSS you can flip an image.

-moz-transform: scaleX(-1); /* For Mozilla Firefox */
-o-transform: scaleX(-1);   /* For Opera */
-webkit-transform: scaleX(-1); /* For Safari, Google chrome */
 
/* For IE */
filter: FlipH;
-ms-filter: "FlipH";

Image before flipping:

Image after flipping:

Note: You cannot flip images used as background image