CODEWITHSUNDEEP
javascriptimageflip
Florian Shena
Florian Shena

Reputation: 1434

Javascript flip image

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 becomes left.

Upvotes: 1

Views: 4803

Answers (1)

icktoofay
icktoofay

Reputation: 129001

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 */
}

Upvotes: 8

Related Questions