Introduction
This article explains how to create 3D effects in Windows Store apps. In Windows Store apps you can apply 3D effects to content or control using perspective transforms. For example you can create the illusion that an object is rotated toward or away from you. Another common usage for perspective transforms is to arrange objects in relation to one another to create a 3D effect.
In this example we are using the "PlaneProjection" class to create a 3D effect. The PlaneProjection class can be used to apply a 3D effect to any UIElement by setting the UIElement's Projection property using a PlaneProjection. The PlaneProjection defines how the transform is rendered in space. Here is an example of 3D effects in Windows Store apps.
Start Visual Studio 2012 and start a new Windows Store apps project.
Go to Solution Explorer and click on "MainPage.xaml" to open it.
RotationX
The RotationX property rotates around the x-axis of the center of rotation.
<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.3" />
<Image Source="mywall.jpg" Height="250" Width="350">
<Image.Projection>
<PlaneProjection RotationX="-45" />
</Image.Projection>
</Image>
RotationY
The RotationY property rotates around the y-axis of the center of rotation.
<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.3" />
<Image Source="mywall.jpg" Height="250" Width="350">
<Image.Projection>
<PlaneProjection RotationY="-45" />
</Image.Projection>
</Image>
RotationZ
The RotationZ property rotates around the z-axis of the center of rotation.
<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.3" />
<Image Source="mywall.jpg" Height="250" Width="350">
<Image.Projection>
<PlaneProjection RotationZ="-45" />
</Image.Projection>
</Image>
CenterOfRotationX
The CenterOfRotationX properties moves the center of rotation along the x-axis parallel to the object.
<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.2" />
<Image Source="mywall.jpg" Height="250" Width="350" >
<Image.Projection>
<PlaneProjection RotationY="-50" CenterOfRotationX="0.9" />
</Image.Projection>
</Image>
CenterOfRotationY
The CenterOfRotationY properties moves the center or rotation along the y-axis of the object.
<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.3" />
<Image Source="mywall.jpg" Height="250" Width="350">
<Image.Projection>
<PlaneProjection RotationX="-45" CenterOfRotationY="0.6" />
</Image.Projection>
</Image>
3D Effect on UIElement
In the above example we apply a 3D effect on the image. But you can also apply this effect on a UIElement, including a control.
<StackPanel Margin="35" Background="SteelBlue" Height="250" Width="450">
<StackPanel.Projection>
<PlaneProjection RotationX="-35" RotationY="-60" RotationZ="1" />
</StackPanel.Projection>
<TextBlock Margin="10">3D Effect on UIElement</TextBlock>
<TextBox Margin="10"></TextBox>
<Button Margin="10" Content="Click" Width="100" />
</StackPanel>