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.

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.

Proudly sponsored by

Moriyama

  • Moriyama build, support and deploy Umbraco, Azure and ASP.NET websites and applications.
AppVeyor

  • CI/CD service for Windows, Linux and macOS
  • Build, test, deploy your apps faster, on any platform.
stkrs

  • Custom stickers for startups, artists and brands.
  • Bespoke easy-apply, removable, custom brand stickers printed in the UK.
elmah.io

  • elmah.io is the easy error logging and uptime monitoring service for .NET.
  • Take back control of your errors with support for all .NET web and logging frameworks.
uSync Complete

  • uSync.Complete gives you all the uSync packages, allowing you to completely control how your Umbraco settings, content and media is stored, transferred and managed across all your Umbraco Installations.