Reversing the orientation of images is very easy with CSS, if somewhat counter-intuitive for those not mathematically inclined: to flip an image, you use a value of -1 with the CSS transform properties scaleX or scaleY, depending on whether you wish to flip the element horizontally or vertically.

Why is this useful? Well, think of the number of times you’ve loaded an image into a web page only to discover that it’s aligned in the wrong direction: for example, the subject of a photo is gazing out of the frame when you want their eyes directed inwards. It’s also true that some images look more attractive in one orientation than the reverse: the flipped image of Abraham Lincoln at the top of this article being a good example. The image on the left is the way we see and know The Great Emancipator; the image on the right is how Lincoln saw himself in the mirror. Sometimes images just look better in one orientation than the other.

The traditional solution to having an image in the wrong direction in a web page is to take the picture back into PhotoShop, flip it, re-export it, and re-upload it to the website. Applying CSS to modify the rendering of an image without altering the original is much more efficient.

Let’s take the Victorian-style pointing hands on the banner in my recent “Scroll To Top Then Fixed” article as an example. The hands either side of the banner text are exactly the same, just mirror-images of each other, and any request for an extra file slows down our page. So rather than bringing two separate images onto the page, I’ll call in the same image twice, but apply an extra class to the second:

<img src="hand.png" alt class="hand">Fabulous Floating Banner
<img src="hand.png" alt class="hand righthand">

The hand class will contain the shared rules for the appearance of both uses of the image, with the exception of float:

img.hand {
	width:106px;
	height: 41px;
	vertical-align: middle;
	float: left;
}

The righthand class will switch the orientation of the image, and change its float:

img.righthand {
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	float: none;
}

(Note that the code does not use vendor prefixes; also note the Microsoft-proprietary CSS selectors at the end of the declaration.)

Now the page only loads the one image, and alters it to what is needed for the right hand version: one of the principles of using CSS technologies to filter and alter existing elements to create new variations of content, avoiding unnecessary duplication and speeding up development. This also has the advantage that if I alter the original pointing hand image, I don’t need to worry about duplicating any changes for the copy on the other side: the CSS will do that for me.

To understand the use of -1 in the property value: imagine the left hand being scaled down to an infinitesimal point (scale 0). When it passes 0, the image reverses and begins to grow again. So transform: scaleY(-2) would be vertically flipped, and twice as large as the original.

While this technique will be most commonly applied to images, the same method could be used on any HTML content… for obvious reasons, I wouldn’t recommend that you mirror-reflect paragraph text.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.