So simple to flip an image using CSS. I use CSS image flip while using repetitive images such as arrows. I also use it for the main blog post image to grab my reader’s attention. More than all these it’s basically fun trying these kind of effects in CSS.

Flip an Image

CSS

.flip-img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

HTML

<img class="flip-img" src="http://www.webfroze.com/wp-content/uploads/2011/11/flipcss.jpg"/>