Flipping images with just CSS
October 13th, 2010You might have used the cool new transform CSS property to rotate, scale and move elements around already, but did you know that you can use it to flip images horizontally or vertically?
.flip-horizontal { -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) }
.flip-vertical { -webkit-transform: matrix(1, 0, 0, -1, 0, 0) }
You can add the same matrix transforms with -o-transform, -moz-transform and transform to target a wide spectrum of browsers.
Just add the flip-horizontal or flip-vertical CSS class to any element and you’re done!
See a live demo here (requires Chrome, Safari or other WebKit-based browser).
So how do you come up with those numbers?, you ask! Just check out this Wikipedia article on linear maps. Everything is explained in there (contains some maths, but nothing too hair-raising). See the examples first. The numbers in the matrices there correspond to numbers you give to the matrix function, in the order of top left, top right, bottom left, bottom right.
Learn more, much, much more at my HTML5 Mobile Pro workshop!
Tweet
