February 25, 2015

Flip an image using CSS

Flip an image using CSS

You can flip images with css very easily. When you use an arrow image and you want to use the same arrow to point on some other directions you can use this method. There is no need to have two images for that.

You can add this flip to texts too.

HTML

<img src="https://sites.google.com/site/thelittletechie/img/flip-an-image-using-css.jpg" />

CSS

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

No comments:

Post a Comment

Popular Posts

Views