This technique is something I've been using/known about for a while, and it recently came into practice again in a project I'm currently working on. It got me thinking, i wonder if anyone else know's about this? Some probably do, but i'm sure there are enough people who don't. So here it is.

What's the use case

Sometimes a design requires some textual content to be placed over an image. Often the design itself looks super flashy and everything is great. That is until it's released into the wild, and who know's what sort of image will be used. Often these types of designs have the text content covering a non-important part of the image, with the remaining space being a focal point of sorts. In these scenarios it can be really useful to be able to flip the image so that the focal point is the the side that you want.

 

 

How is it done?

There are a number of ways to flip an image depending on how to want to flip it. All of them can be do using one property. transform

Here's what the default image we're going to work with looks like.

The code

Here's what the code for each flip loops like.

   

.flip-horizontal {
    transform: scaleX(-1);
}

.flip-vertical {
    transform: scaleY(-1);
}

.flip-both {
    transform: scale(-1);
} 

Horizontal

.flip-horizontal {
    transform: scaleX(-1);
}

Vertical

.flip-vertical {
    transform: scaleY(-1);
}

Both

.flip-both {
    transform: scale(-1);
}

Caveats

As with many things in the land of code, there are some caveats to this approach, although they are fairly minor.

  • Whilst transforms are supported in all modern browsers, some older ones will need a prefix caniuse.com/#search=transform
  • If you need to support IE8 or below, it wont work (And i also feel for you).

I hope you find this useful, and if it's something you already knew, please share it with someone who may not, Thanks.

Share this post

About the author

Mike Masey

Mike is a Developer at Yoyo Design, organiser of @FrontEndKent, @UmbKent & @codebarKent. He's an Umbraco Master and owner of a fluffy husky.

Related Posts

How to create a responsive website without knowing how to write code - Bootstrap Studio

Bootstrap studio lets you build fully responsive websites without having to know how to write CSS, H…

Read Post

How to inline CSS and JavaScript bundles in MVC

This post shows you how you can combine bundling and minification with inline styles and scripts in…

Read Post

How to set up GA Event Tracking in 3 easy steps

This post makes setting up Event Tracking with GA really easy. It's definitely worth doing on your s…

Read Post

How to fix Font Awesome WebFont woff2 not found

If you are getting the error fontawesome-webfont.woff2?v=4.6.3 not found but you definitely know you…

Read Post