flex如何实现3d旋转

对于flex来说3d旋转其实挺容易实现的。

只需要使用了六个属性就可以了，三个旋转属性rotationX、rotationY、rotationZ，

三个旋转点设置属性transformX、transformY、transformZ。

三个rotation属性分别定义了绕旋转轴旋转的角度，三个transform属性合起来定义了旋转点（默认在0点）的位置。

顺便说一下任何组件的旋转点默认都在0, 0点，即左下角。

 

rotationX：绕 X轴 旋转的角度

rotationY：绕 Y轴 旋转的角度

rotationZ：绕 Z轴 旋转的角度

transformX：旋转点 左右 平移的距离

transformY：旋转点 上下 平移的距离

transformZ：旋转点 前后 平移的距离

 

至于正负值的意义请看下图：

 

说了这么多请看个Flex小例子吧：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/<a href="http://www.51x%3Ca%20href%3D/" http:="" www.51xflash.com'="" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; "> flash.com/article/flex' target='_blank'> flex/spark" 
      xmlns:mx="library://ns.adobe.com/<a href="http://www.51x%3Ca%20href%3D/" http:="" www.51xflash.com'="" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; "> flash.com/article/flex' target='_blank'> flex/mx"
      mouseMove="mouseMoveHandler(event)"
      width="450" height="320" backgroundColor="#99FF00"
      mouseChildren="false">
 <fx:Script>
  <![CDATA[
   private function mouseMoveHandler(e:MouseEvent):void {
    group.rotationX = (e.localY / this.height - 0.5) * 90;
    group.rotationY = (0.5 - e.localX / this.width) * 90;
   }
  ]]>
 </fx:Script>
 <s:Group id="group" horizontalCenter="0" verticalCenter="0" 
    transformX="{group.width/2}" transformY="{group.height/2}" transformZ="-100">
  <s:layout>
   <s:TileLayout requestedColumnCount="2" requestedRowCount="2" 
        horizontalGap="0" verticalGap="0"/>
  </s:layout>
  <s:BitmapImage source="@Embed('tp1.png')"/>
  <s:BitmapImage source="@Embed('tp2.png')"/>
  <s:BitmapImage source="@Embed('tp3.png')"/>
  <s:BitmapImage source="@Embed('tp4.png')"/>
 </s:Group>
</s:Application>