demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Abraham LincolnAbraham Lincoln

Flipping Images With CSS Transforms

css / transforms

Estimated reading time: 2 minutes, 45 seconds

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 , 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.

CSS transform scale using negative valuesTo 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.