<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    addedToStage="init()"
    verticalScrollPolicy="off"
    width="600"
    height="400" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            
            import flash.events.MouseEvent;
        
            private function init():void
            {
                if (stage != null)
                {
                    stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
                }
            }
            private function mouseMoveHandler(event:MouseEvent):void
            {
                container.rotationY = (this.width/2-mouseX)/this.width*180;
                container.rotationX = (this.height/2-mouseY)/this.height*180;
                mirror.rotationY = container.rotationY;
                mirror.rotationX = -container.rotationX;
                
            }
        ]]>
    </mx:Script>
    
    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>
    
    <mx:Canvas id="container" clipContent="false" x="{this.width/2}" y="{this.height/2}"
        width="0" height="0" autoLayout="false"> 
        <mx:DataGrid x="-150" y="-150" 
            id="dg" width="300" height="300" rowCount="5" dataProvider="{employees}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>
    <mx:Canvas id="mirror" x="{this.width/2}" clipContent="false"
        y="{this.height/2 + dg.height + 10}">
        <mx:Canvas  x="-150" y="-150" width="300" height="300"
            backgroundColor="#FFFFFF" backgroundAlpha="0.3"/>
    </mx:Canvas>
</mx:Application>