flex 4.6 3D rotation axis - actionscript-3

Question

I am trying to perform some 3D rotation on pictures, but it harder than it look.
The fact is that when you rotate a picture on the axis X and/or Y, it look stretched (but it's normal). But when you make a rotation from the axis Z, the picture rotate around the Z axis of the screen instead of it own axis. So it look like a stretched picture which turn around an axis instead of a plate picture, viewed from a side and which turn around it center.
Since I know it's a little confusing, here is the function I am using. You can try it with a circular picture for a better "effect". Just imagine you want a rotating circle, no mater the orientation. You will see that the picture rotate around the axis of the screen insteat of it's own axis.
public function rotate(target:IVisualElement, x:Number = 0, y:Number = 0, z:Number = 0, duration:Number = 1000):void
{
var rotation:Rotate3D = new Rotate3D();
rotation.autoCenterTransform = true;
rotation.angleXTo = x;
rotation.angleYTo = y;
rotation.angleZTo = z;
rotation.duration = duration;
rotation.target = target;
rotation.play();
}
Is there a easy simple way to perform theses rotations without having to redevelop the wheel ?

Answer 1

Finally I managed to have something which work perfectly and without external library. The trick was so simple that I don't understand why I don't tried it before.
Instead of applying X, Y and Z transformations on the same element, I apply the X and Y rotations on a container and the Z axis on the picture inside the container.
Like this, the Z rotation doesn't disturb the other axis anymore.
Here is the working test code:
<fx:Script>
<![CDATA[
private function init():void
{
moveZ();
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER, repeat);
timer.start();
}
private function repeat(e:TimerEvent):void
{
moveZ();
}
private function moveX():void
{
rotX += 20;
fx.angleXTo = rotX;
fx.angleYTo = rotY;
fx.angleZTo = 0;
fx.duration = 1000;
fx.play(new Array(container));
}
private function moveY():void
{
rotY += 20;
fx.angleXTo = rotX;
fx.angleYTo = rotY;
fx.angleZTo = 0;
fx.duration = 1000;
fx.play(new Array(container));
}
private function moveZ():void
{
rotZ += 360;
fx.angleXTo = 0;
fx.angleYTo = 0;
fx.angleZTo = rotZ;
fx.duration = 5000;
fx.play(new Array(image));
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Number id="rotX">0</fx:Number>
<fx:Number id="rotY">0</fx:Number>
<fx:Number id="rotZ">0</fx:Number>
<s:Rotate3D id="fx" autoCenterProjection="true" autoCenterTransform="true"/>
</fx:Declarations>
<s:VGroup id="vGroup" left="10" top="10">
<s:Button label="X" buttonDown="moveX()"/>
<s:Button label="Y" buttonDown="moveY()"/>
</s:VGroup>
<s:BorderContainer id="container" width="200" height="200" horizontalCenter="0"
verticalCenter="0">
<s:BitmapImage id="image" width="200" height="200" horizontalCenter="0" smooth="true"
source="#Embed('assets/circle.png')" verticalCenter="0"/>
</s:BorderContainer>