Cross-browser way to flip html/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.

Is there a reason you cannot simply have two copies of the image? — cwallenpoole, Aug 20 '09 at 21:59
@Christopher W. Allen-Poole . The images are provided by the user and there is no server-side component... only a single HTML with XML data file as backend... so I only have JS/CSS for flipping them... if this can be automated, it'll wlil be one less thing to teach them other than editing XMLs... — chakrit, Aug 20 '09 at 22:17

Eli Grey · Accepted Answer · 2014-10-31T04:10:06.063

193

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;
}

edited Oct 31 '14 at 04:10

answered Aug 20 '09 at 22:51

Eli Grey

35,104
14
75
93

3

pls don't forget `-o-transform: scale(-1,0);` and `-o-transform: scale(0,-1);` http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ – Jakob Cosoroaba Nov 09 '10 at 19:13
Thanks. I added Opera transforms. – Eli Grey Nov 10 '10 at 20:54
3

No need for `-ms-filter: "FlipH"` ? – Ebrahim Mohammadi May 14 '11 at 02:00
@EliGrey Could this (or sth similar) also work through Firefox's Scratchpad? That is, I'm looking for a lightweight way to edit live HTML/CSS (without using the resource-heavy Firebug). – nutty about natty Mar 21 '13 at 08:03
1

Thanks for this. Note that (using Chrome) I also had to ensure that it wasn't on an inline element. using display:inline-block fixed it for me. – Damien Sawyer Sep 23 '13 at 03:31

score 3 · Answer 2 · answered Aug 20 '09 at 22:53

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.

score 3 · Answer 3 · answered Mar 12 '14 at 14:03

Just dug up this answer while trying to fix a bug, while the suggested answer is correct I have found that it breaks most modern CSS Linting rules regarding the inclusion of all vendor rules for the transform. However, including the -ms-tranform rule causes an odd bug in IE9 where it applies the filter and -ms-transform rules causing an image to flip and flip back again.

Here is my suggested improvement which also supports CSS Lint rules:

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(1); /* linting rule fix + IE9 fix */
    transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(1);  /* linting rule fix + IE9 fix */
    transform: scaleY(-1);
    -ms-filter: flipv;
    filter: flipv;
}

score -3 · Answer 4 · answered Jul 20 '10 at 18:05

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>

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

4 Answers4

Linked