Perform RotateTransform in Silverlight

RotateTransform: Silverlight provides the four transform classes which is used for transformations. All of them can be grouped into a single TransformGroup to apply multiple transformations to a single object.

• TransformGroup

 
1. RotateTransform - Rotates by an angle
    
2. ScaleTransform - Scales by a a given X and Y
    
3. SkewTransform - Skews an element by an X and Y angle
    
4. TranslateTransform - Moves and object by a specified X and Y

A Transform defines how to map, or transform, points from one coordinate space to another coordinate space.

In given below example I written two horizontal flipping coin transform using frame events, Everything looks great however it appears that in the browser when interpreting the transition for different degree and different attributes.

Example of RotateTransform

<UserControl x:Class="SilverlightApplication16.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
       <UserControl.Resources>
        <Storyboard x:Name="Flipping">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="ellipse" Storyboard.TargetPro    
            (UIElement.Projection).(PlaneProjection.RotationX)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="45"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="90"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.7500000" Value="135"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="180"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.2500000" Value="225"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="270"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.7500000" Value="315"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:02" RepeatBehavior="Forever" Storyboard.TargetName="ellipse2" Storyboard.Targ
            (UIElement.Projection).(PlaneProjection.RotationX)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="45"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="90"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.7500000" Value="135"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="180"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.2500000" Value="225"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="270"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.7500000" Value="315"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="300"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid x:Name="grid" Margin="109,86,278,141">
            <Grid.Projection>
                <PlaneProjection/>
            </Grid.Projection>
        </Grid>
        <Button Height="50" HorizontalAlignment="Left" Margin="154,0,0,12" VerticalAlignment="Bottom" Width="87" Content="Start" Click="StartAnimation"/>
        <Ellipse x:Name="ellipse" Stroke="Black" Margin="287,66,100,161">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.8,0">
                    <GradientStop Color="Pink" Offset="1" />
                    <GradientStop Color="White" Offset="2" />
                </LinearGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Projection>
                <PlaneProjection />
            </Ellipse.Projection>
        </Ellipse>
        <Ellipse x:Name="ellipse2" Stroke="Black" Margin="96,68,291,159">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.6,0">
                    <GradientStop Color="Blue" Offset="1" />
                    <GradientStop Color="White" Offset="2" />
                </LinearGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Projection>
                <PlaneProjection />
            </Ellipse.Projection>
        </Ellipse>
    </Grid>
</UserControl>

// MainPage.Xaml.vb code

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Ink
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes

Partial Public Class MainPage
    Inherits UserControl
    Public Sub New()
        InitializeComponent()
    End Sub
    Private Sub StartAnimation(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Me.Flipping.Begin()
    End Sub
End Class

Output Window

Conclusion

Hope this article would help you understand how to Perform RotateTransform in Silverlight.