Problem
In Flex, all components have their registration point set to the upper left corner. This poses a problem when you want to rotate a component in 3D around its center point.
Solution
Wrap the component you want to rotate in another container and position the component's center point to the upper left corner of the container and rotate the container instead.
Detailed explanation
Now this poses a problem when you have an application that uses an image, for example, that needs to rotate in 3D around its center point. You see, Flex components all have their registration point fixed to the upper left corner, as you can clearly see in the image below.
At the moment I haven't found a way to change the registration point for Flex components, but there is a way to get this 3D rotation to work exactly as you'd want it to, around the center point.
The trick is to wrap the component (in this case an image) with another component and make sure that the left top corner of the wrapper aligns with the center point of your actual component. That means using absolute positioning with negative values. The resulting code could look like this:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:Group rotationX="-30" rotationY="-30" x="{100 + img.width/4}" y="{100 + img.height/4}">
<s:Image id="img" source="assets/FB.png" x="{-img.width/2}" y="{-img.height/2}" />
</s:Group>
</s:Application>
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
