How to rotate 2D UIElement around a 3D axis (Y)?

Question

I have a Grid with some content (image, text) and I would like to rotate it around y-axis in 3D space - somehow an animated tilt effect.

Is there an easy wa

Answer 1

Using Viewport3D

if you are willing to use 3D models and rotations then here is a sample I attempted to for you, I tried to reproduce the expected result, may not be accurate

    <Viewport3D>
        <Viewport3D.Resources>
            <Style TargetType="Image">
                <Setter Property="Width"
                        Value="20" />
                <Setter Property="Margin"
                        Value="4" />
                <Setter Property="Source"
                        Value="desert.jpg" />
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect BlurRadius="4"
                                          Direction="0"
                                          ShadowDepth="0" />
                    </Setter.Value>
                </Setter>
            </Style>
        </Viewport3D.Resources>
        <Viewport3D.Camera>
            <PerspectiveCamera Position="0, 0, 4" />
        </Viewport3D.Camera>
        <Viewport2DVisual3D>
            <Viewport2DVisual3D.Transform>
                <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                        <QuaternionRotation3D x:Name="rotate"
                                              Quaternion="0, 0, 0, 0.5" />
                    </RotateTransform3D.Rotation>
                </RotateTransform3D>
            </Viewport2DVisual3D.Transform>
            <Viewport2DVisual3D.Geometry>
                <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
                                TextureCoordinates="0,0 0,1 1,1 1,0"
                                TriangleIndices="0 1 2 0 2 3" />
            </Viewport2DVisual3D.Geometry>
            <Viewport2DVisual3D.Material>
                <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />
            </Viewport2DVisual3D.Material>
            <UniformGrid Columns="3"> <!--host your content here-->
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
            </UniformGrid>
        </Viewport2DVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <DirectionalLight Color="#FFFFFFFF"
                                  Direction="0,0,-1" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Viewport3D.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <QuaternionAnimation Storyboard.TargetName="rotate"
                                             Storyboard.TargetProperty="Quaternion"
                                             To="-0.25, 0.25, 0.15, 0.65"
                                             Duration="0:0:10"
                                             RepeatBehavior="Forever">
                            <QuaternionAnimation.EasingFunction>
                                <ElasticEase />
                            </QuaternionAnimation.EasingFunction>
                        </QuaternionAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Viewport3D.Triggers>
    </Viewport3D>

now you can rotate your model which is the UI host, currently hosting the grid with the image tiles.

also you can convert same to a style & template for ContentControl with attached properties for rotation and reuse it where you want.

Using 2D transforms

a sample for you to achieve 3D transform into grid with normal transformations

the key is to convert 3D transform to 2D and apply to grid directly without complex 3D stuff (this sample does not have any converstion) it simply demonstrate a 3D looking grid transformation for your reference.

    <Grid Width="100" Height="100" >
        <Grid.Background>
            <ImageBrush Opacity=".5" ImageSource="Desert.jpg"/>
        </Grid.Background>
        <Button Content="Some Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Grid.RenderTransform>
            <SkewTransform x:Name="skew" CenterX="50" CenterY="50"/>
        </Grid.RenderTransform>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="skew" Duration="0:0:25" Storyboard.TargetProperty="AngleX" From="0" To="60" RepeatBehavior="Forever">
                            <DoubleAnimation.EasingFunction>
                                <ElasticEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="skew" Duration="0:0:20" Storyboard.TargetProperty="AngleY" From="0" To="50" RepeatBehavior="Forever">
                            <DoubleAnimation.EasingFunction>
                                <ElasticEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>