The following example shows how you can rotate an image around an arbitrary X and Y origin using the <mx:Rotate/> tag in Flex.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/10/rotating-images-using-the-rotate-class/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Rotate id="rotate" target="{img}" angleFrom="0" angleTo="360" duration="1000" originX="{imgOriginX.value}" originY="{imgOriginY.value}" /> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="originX:"> <mx:NumericStepper id="imgOriginX" minimum="0" maximum="{img.width}" value="0" /> </mx:FormItem> <mx:FormItem label="originY:"> <mx:NumericStepper id="imgOriginY" minimum="0" maximum="{img.height}" value="0" /> </mx:FormItem> <mx:FormItem> <mx:Button label="Rotate" click="rotate.play();" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:Image id="img" source="@Embed('flex_logo.jpg')" /> </mx:Application>
View source is enabled in the following example.

{ 9 comments… read them below or add one }
i wante to do that when i rollOver why can i do that ??? please
lala,
You can try setting the
rollOverEffectstyle/effect:<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Rotate id="rotate" target="{img}" angleFrom="0" angleTo="360" duration="1000" originX="{img.height/2}" originY="{img.width/2}" /> <mx:Image id="img" source="fx_appicon-tn.gif" rollOverEffect="{rotate}" /> </mx:Application>Peter
How to set up rotate on rollOver in loop?
I mean when mouse over image its still rotating untill mouse gone out?
@MechanisM,
Peter
Hi,
How to rotate an image to 90 degree when the button is clicked?
If i click the button again, it should totate to 180 degree. (ie) agian it should rotate to 90 degree from the last position.
I was working with this issue for the last 3 days. Can some one help me?
Hello there,
The example is a nice one. How can I control the rotation of an image with a mouseDown event? Like I want control on the rotation of the image. What am I supposed to do. Any hints please?
Hi,
The rotation feature is good. I need to control the rotation angle by an external feed. Would you have any sample code? Thank You
More importantly… How can I rotate an images rotateX, rotateY, and rotateZ? 3D rotation using Flex 3, without special libs or plugins… is it possible?
@Johnny Doe,
I believe it’s possible in Flex 3 if you target Flash Player 10.
Peter