How to create a Silverlight Pendulum Swing 3D text effect

I'm seeing this text effect in tons of commercials, and web sites lately.

And I've found ways to do it in Flash, 开发者_开发百科and JavaScript, but nothing that would directly help me achieve it in Silverlight.

Here's an example of the effect: http://activeden.net/item/pendulum-swing-3d-component-as3/85056

Basically the idea is the text is on a billboard and if flipped into view along the top horizontal axis.

Any one know of a tutorial or an approach to achieve this effect. I haven't been able to recreate it to where the effect matches and seems natural.

The 3D perspective appearance needed by this animation can be acheived by animation a PlaneProjection. The overshoot and then back swing of the "pendulum" can probably be approximated using a BackEase easing function.

Here is a rough attempt, its close but you will probably need to finesse the numbers a little more to get a smoother result (final settling isn't quite right):-

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <Storyboard x:Name="Swing">
            <DoubleAnimationUsingKeyFrames  Duration="0:0:1" Storyboard.TargetName="Notice"
                Storyboard.TargetProperty="(Border.Projection).(PlaneProjection.RotationX)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="15">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="1.3" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="2" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </Grid.Resources>
    <Border x:Name="Notice" Background="Orange" CornerRadius="5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" >
        <Border.Projection>
            <PlaneProjection RotationX="90" CenterOfRotationY="0" />
        </Border.Projection>
        <TextBlock FontSize="24" FontWeight="Bold" Foreground="Yellow">NICE EFFECT?</TextBlock>
    </Border>
    <Button Content="Go" Height="35" HorizontalAlignment="Left" Margin="214,13,0,0" Name="button1" VerticalAlignment="Top" Width="142" Click="button1_Click" />
</Grid>

Code:-

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        ((PlaneProjection)Notice.Projection).RotationX = 90;
        Swing.Begin();
    }