Friday, March 8, 2013

CSS Code To Flip an Image


Here is the CSS code which helps you to flip the images. For example having only one graphic for an "arrow", but flipping it around to point in different directions.

Question related to this topic:

Can this trick be applied to background images?
The answer is Yes! It can be applied to background images.

Actually it can be applied to background images and it works fine with the following:
-Fire Fox
-Chrome
-IE

The problem related with IE is, When you will use the IE it will show the “ActiveX” bar at top of your page and asks you to allow the Blocked Content or otherwise it will only show the none-flipped background image. I know this is very annoying but this what it is.
So When it asks to allow you simply allow it.

Demo:

Unflipped Image:

Flipped Image:


Now here Comes the Code:

***---CSS---***

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




0 comments: