get image's mirror image using jquery

Question

I want to get mirror image of image in both x-axis and y-axis using jQuery . When user clicks on button image changes to it's mirror image.

I am not able to search it on internet.

I just got one solution using css not jquery but I need jQuery for both the direction.

I want to do these reflections one by one means when I click on Reflect X button it should reflect on X-axis and similar case for Y axis.

So I used scaleX(-1) instead of scale() for x-axis but what the problem is When I do it image is reflecting fine but it's position is changing. Can you Please help me to keep it stay on the same place and just reflect it on x-axis.

Thanks!!!

You could action the css solution using Jquery? Jquery can manipulate CSS. — Liam, May 10 '13 at 13:02

score 6 · Answer 1 · answered May 10 '13 at 13:06

6

You can use CSS3 to mirror the image

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);

To use this with jQuery, you could do something like this:

 .mirror {
     -moz-transform: scale(-1, 1);
     -webkit-transform: scale(-1, 1);
     transform: scale(-1, 1);
  }

And then add the class "mirror" to the Object.

$('object').addClass('mirror');

to make it back normal, just remove it:

 $('object').removeClass('mirror');

answered May 10 '13 at 13:06

Simon

168
6

Thanks @Simon I got it how to do with jQuery. – user2307273 May 10 '13 at 13:12
Glad I could help. If your question has been answered, don't forget to select an answer as the best. – Simon May 10 '13 at 13:19
I want to do these reflections one by one means when I click on Reflect X button it should reflect on X-axis and similar case for Y axis. So I used scaleX(-1) instead of scale() for x-axis but what the problem is When I do it image is reflecting fine but it's position is changing. Can you Please help me to keep it stay on the same place and just reflect it on x-axis. Thanks – user2307273 May 10 '13 at 13:23

score 2 · Answer 2 · answered May 10 '13 at 13:03

You can use CSS for this.

transform: scale(-1, -1)

This will set both X and Y to -1.

The first one is X and the second is Y.

From MozDev:

transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */

https://developer.mozilla.org/en-US/docs/CSS/transform

get image's mirror image using jquery

2 Answers2