Is there any way of achieving “card flipping” (RotationX ,RotationY, RotationZ) effects on Panels?
The Rotate animator, and Rotation transform, supports rotations around any axis, DegreesY is probably the one you are looking for.
However, by default the UI elements are rendered using a flat camera: the Z dimension will have no impact (other than squishing things). You need to enable a perspective on your root node:
<Viewport Perspective="200" CullFace="Back">
...your normal UI...
</Viewport>
Perspective says how far the camera is away from the Z=0 plane. Since you are doing card rotations you’ll probably want the CullFace="Back" as well, otherwise things rotated Y=180 will just be mirrored and not invisible.
At the moment this must be the root element of your app. It’s on our list of features to lift this restriction and allow a new viewport (thus camera) anywhere.
Let me know if you get it working, otherwise I can put together a small card flipping example.
Great Feedback! Thanks.
Im just starting to get my hands dirty with Fuse. So far im really impressed. And comming from “Flex/Air” the declarative markup is just awesome.
In regards to my question, I really don’t need a full card flip. Im trying to redo some of the stuff I have been doing in Flex, as a learning process. Here Im trying to create a subtle animation for showing overlay content. Main Content animates away and gives room for overlay content that needs full user attension. Take a look at my screen capture here to see the animation im after. https://vimeo.com/57271159.
Is TransformOrigin on Elements supported with this? Im animating a panel, and it seems to be “Flipping” from its TopLeft.
Edit: Got it to work. Just needed to Wrap the content im animating inside another Panel container
TransformOrigin is supported. The default should be Center, but sometimes layout may make it appear as TopLeft. Anchor is really useful for finely controlled transformations: it uses the layout Anchor value as the origin.
HorizontalBoxCenter and VerticalBoxCenter are specially made for 3d transforms. They treat the element as though it were the face of a box and set the transform point at the center of it. This makes it easy to rotate as though on the face of that box.
If you need to rotate around two different origins you can embed in multiple panels, as you have done. If more complex requirements come up we’ll have to extend the system.