Javascript flip image - Stack Overflow

admin管理员组

文章数量:1333710

Does anyone know if there is any JavaScript library for image flipping. I don't want the css3 effect i want to actually flip an image as you do on image editors when right bees left.

Does anyone know if there is any JavaScript library for image flipping. I don't want the css3 effect i want to actually flip an image as you do on image editors when right bees left.

• javascript
• image
• flip

Share Improve this question Follow asked Oct 7, 2012 at 19:53 Florian ShenaFlorian Shena 1,43444 gold badges2020 silver badges2828 bronze badges 4

• Do you want to mirror its bits or just to mirror its rendering? – c-smile Commented Oct 7, 2012 at 19:55
• mirror its bits but I also need it to work on IE8 – Florian Shena Commented Oct 7, 2012 at 19:57
• It would be easy enough with a Canvas, but that won't work on IE8... – Alnitak Commented Oct 7, 2012 at 19:58
• "mirror bits" of image that was downloaded from Web and which resides in browser cache? – c-smile Commented Oct 7, 2012 at 20:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

An easy way to flip an image is to use CSS3. I assume by "CSS3 effect" you meant an animation, and this does not do this.

img {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

This works by scaling the image by -1 on the X axis (flipping it along that axis) and 1 on the Y axis (doing nothing). If you wanted to flip on the Y axis rather than the X axis, you could switch around X and Y.

CSS3 transforms could also be used for rotating, if the need arose. Rather than scale(-1, 1) you could use something like rotate(90deg) to rotate 90 degrees clockwise.

---

For Internet Explorer support, you can use the filter property:

img {
    filter: fliph;
    /* all of the transforms above */
}

本文标签： Javascript flip imageStack Overflow