Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cross-browser way to flip html/image via Javascript/CSS?

Is there a library/simple way to flip an image?

Flip image like this:

AABBCC      CCBBAA AABBCC  ->  CCBBAA 

I'm not looking for animations, just flip the image.

I've googled to no avial and only found a complex version that utilized SVG on MozillaZine which I'm not confident that it'll work cross-browser.

like image 803
chakrit Avatar asked Aug 20 '09 21:08

chakrit


1 Answers

The following CSS will work in IE and modern browsers that support CSS transforms. I included a vertical flip class just in case you might want to use it too.

.flip-horizontal {     -moz-transform: scaleX(-1);     -webkit-transform: scaleX(-1);     -o-transform: scaleX(-1);     transform: scaleX(-1);     -ms-filter: fliph; /*IE*/     filter: fliph; } .flip-vertical {     -moz-transform: scaleY(-1);     -webkit-transform: scaleY(-1);     -o-transform: scaleY(-1);     transform: scaleY(-1);     -ms-filter: flipv; /*IE*/     filter: flipv; } 
like image 84
Eli Grey Avatar answered Oct 01 '22 01:10

Eli Grey