Perspective 3D Screen flip with PlaneProjection

Almost a year ago I created a Silverlight 2 example that demonstrated how you could use a procedural animation to duplicate one of the transitions used on the iPhone. When a iPhone user goes to make a phone call, if you choose to display the keypad there is a cool 3D flip that occurs. Back in SL2 it was a pretty lengthy animation that never quite duplicated the correct amount of 3d perspective needed to make the flip look realistic.

Thankfully in Silverlight 3 we now have perspective 3D which allows us to take 2D objects and rotate them in 3D space. For this example I will use PlaneProjection to rotate a Grid with an extremely simple DoubleAnimationUsingKeyFrames.

My first DoubleAnimationUsingKeyFrames simply targets the RotateY property of Grid.Projection.PlaneProjection. The second two are used to fade the back from opacity 0 to 1 and the front from opacity 1 to 0.

To get my grid representing the back to start flipped 180 degrees I simply apply PlaneProject to it as well.

Here is the final example with nothing in the code behind except for the Flip button handler.

Code: ScreenFlipv3.zip