Page 1 of 1

Generating a Rotating effect for an image

Posted: Mon May 17, 2010 8:34 am
by siji86
Hi All,
I have an image and i want to rotate the image using the edges of the image as an anchor point. But i could not find any appropriate event to accomplish the task.
I tried using the onDrag Event but the image tag doesn't support the ondrag event, so i tried using the onmouseDown event and on that event i have rotated the image by certain degree. But still i have not achieved a smooth rotation.
Also i found a JQuery plugin for rotation
http://webscripts.softpedia.com/script/ ... 59056.html
The desired rotation is fine, but because of integrating it, other functionalities like resizing of image (JQuery Resizable) and Dragging (JQuery Draggable) is not working fine.

Does anybody have some simple solution for this, i am really bugged up trying various combinations of plugins.

Thanks in Advance
:D

Re: Generating a Rotating effect for an image

Posted: Wed May 19, 2010 7:30 am
by siji86
I have got a sample example, in that the image can be rotated using the anchor point by using the mouse drag event.
Is such an effect possible in jQuery, please can anybody have an idea about how this can be done.
Please, if anyone has some clue about this, please do let me know. I am in desperate need for this functionality.
Here is the sample site i am mentioning about.
http://www.polyvore.com/cgi/app

Thanks in Advance
:banghead:

Re: Generating a Rotating effect for an image

Posted: Thu May 20, 2010 1:39 am
by JellyFish
I'm not sure exactly what you're ask for. Do you want to know how to rotate an img element? I'm not aware of any cross-browser solutions (IE solutions :P), except for using canvas and explorercanvas. So, you can use -webkit-transform CSS property like the site you gave us did. However, that's not cross-browser compatible. Or you can use canvas, which could be cross-browser compatible, but I'm not sure.

But still, I'm not sure if I understand what you're asking.