How to use EffectUpdate?

Question

Take a look at this code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        s|Application {
            background-color: #333333;
        }

        #info {
            padding-top: 5;
            padding-right: 5;
            padding-bottom: 5;
            padding-left: 5;
            font-size: 22;
            background-color: #ffffff;
        }

        #plane {
            corner-radius: 8;
            background-color: #1c1c1c;
        }
    </fx:Style>
    <fx:Script>
        import mx.events.*;

        private var steps:uint = 0;

        private function effectUpdateHandler(event:EffectEvent):void {

            info.text = "rotationY: " + plane.rotationY + " ; steps: " + steps;

            steps++;

        }
    </fx:Script>
    <fx:Declarations>
        <s:Rotate3D
            id="spin"
            target="{plane}"
            autoCenterTransform="true"
            angleYFrom="0"
            angleYTo="360"
            repeatCount="10"
            effectUpdate="effectUpdateHandler(event)"
        />
    </fx:Declarations>
    <s:VGroup horizontalAlign="center" gap="50" width="100%">
        <s:Label id="info" width="100%"/>
        <s:BorderContainer id="plane" width="200" height="200" click="spin.play()"/>
    </s:VGroup>
</s:Application>

it actually works but the plane.rotationY never changes, how can I get the actual value?.

I wish to go further and try something like binding that property to do something like...

<s:BorderContainer id="plane" backgroundColor="{(plane.rotation > 180) ? red : green;}"...