Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Since you are using the Flex framework, you can use the Spark 3D effects to rotate images, rather than fuss with transforms. See the example below (you can easily replace the <code>Rect</code> with your Image). The <code>autoCenterTransform</code> attribute of Rotate3D does all the work of moving the x,y,z rotation point to the center of the object.</p> <pre><code>&lt;?xml version="1.0"?&gt; &lt;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"&gt; &lt;fx:Declarations&gt; &lt;s:Rotate3D id="rotateEffect" target="{myImage}" angleYFrom="0" angleYTo="360" duration="1000" autoCenterTransform="true"/&gt; &lt;/fx:Declarations&gt; &lt;s:Button label="Rotate" x="10" y="10" click="rotateEffect.play()"/&gt; &lt;s:Rect id="myImage" x="20" y="40" height="100" width="100"&gt; &lt;s:fill&gt; &lt;s:SolidColor color="0xABABAB"/&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; &lt;/s:Application&gt; </code></pre> <p>Alternatively, if you do not want to completely center the transform point, but only shift the transform point to allow for the Y rotation, you can adjust the <code>transformX</code> property of your image, as below:</p> <pre><code>&lt;?xml version="1.0"?&gt; &lt;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"&gt; &lt;fx:Declarations&gt; &lt;s:Rotate3D id="rotateEffect" target="{myImage}" angleYFrom="0" angleYTo="360" duration="1000" /&gt; &lt;/fx:Declarations&gt; &lt;s:Button label="Rotate" x="10" y="10" click="rotateEffect.play()"/&gt; &lt;s:Rect id="myImage" x="20" y="40" height="100" width="100" transformX="{myImage.width/2}"&gt; &lt;s:fill&gt; &lt;s:SolidColor color="0xABABAB"/&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; &lt;/s:Application&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload