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

Question

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.

Answer 1

Unfortunately, no. You need to actually modify the image. I'm sure that there are server-side scripts out there that can do this for you.

Answer 2

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);
    transform: scaleX(-1);
    filter: fliph; /*IE*/
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv; /*IE*/
}

Answer 3

Take a look at one of the many reflection.js type libraries, They are pretty simple. In IE they will take and use the 'flipv' filter, there is a 'fliph' filter too. Inside of other browsers, it will create a canvas tag and use the drawImage. Although Elijah's answer probably supports the same browsers.

Answer 4

If you have access to the HTML file, perhaps you use an option like PHPThumb? http://phpthumb.sourceforge.net/

It has a filter that can flip the image.

To get it working, upload PHPThumb to the server and call the image like this:

<IMG SRC="/phpThumb.php?src=/image.jpg&w=100&fltr[]=flip|y">

Answer 5

@Elijah Grey nice! thanks :P

Answer 6

If you only want to flip a background image you can use the class on the internal elements inside a flipped div. Basically you're flipping the internal elements with the main div, but flipping each of them back. Works in Firefox anyway.

Like this:

<div id="container" class="flip-horizontal"> <!-- container would have your background image -->
<h3 class="flip-horizontal">Hello There!</h3>
<p class="flip-horizontal">Here is some text</p>
</div>