UIElement.Transform3D 속성

정의

네임스페이스:

Windows.UI.Xaml

이 요소를 렌더링할 때 적용할 3차원 변환 효과를 가져오거나 설정합니다.

UWP에 해당하는 WinUI 2 API: Microsoft.UI.Xaml.UIElement.Transform3D(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).

public:
 property Transform3D ^ Transform3D { Transform3D ^ get(); void set(Transform3D ^ value); };

Transform3D Transform3D();

void Transform3D(Transform3D value);

public Transform3D Transform3D { get; set; }

var transform3D = uIElement.transform3D;
uIElement.transform3D = transform3D;

Public Property Transform3D As Transform3D

속성 값

Transform3D

이 요소를 렌더링할 때 적용할 3차원 변환 효과입니다. 기본값은 null 입니다.

설명

Transform3D 속성을 사용하여 XAML 요소에 3차원 변환 매트릭스를 적용합니다. 이렇게 하면 사용자를 기준으로 2차원 UI가 3차원 공간에 존재하는 것처럼 보이는 효과를 만들 수 있습니다. Transform3D는 매우 비슷하 RenderTransform게 동작하지만 2차원뿐만 아니라 3차원 공간에서 변환을 허용합니다.

PerspectiveTransform3D 및 CompositeTransform3D

Transform3D 속성을 채우는 데 사용할 수 있는 두 개의 서브클래스가 Transform3D 있습니다. 항상 이러한 서브클래스를 함께 사용하여 3차원 장면을 만들어야 합니다. 매우 간단한 용어로 장면의 루트 요소에 적용 PerspectiveTransform3D 하여 장면의 모든 요소에 대한 공통 뷰포트를 제공합니다. 그런 다음, 장면의 개별 요소에 적용 CompositeTransform3D 하여 공통 뷰포트와 관련하여 회전, 크기 조정 및 이동합니다.

PerspectiveTransform3D 는 3차원 원근 변환 행렬을 나타내며 3차원 장면에 대한 참조 및 뷰포트 프레임을 만듭니다. 원근감 효과에서 사용자로부터 더 멀리 떨어진 요소는 실제로 3차원 공간에서 보는 것처럼 공통 소실 지점으로 축소되는 것처럼 보입니다. 원근감 효과는 공유 3차원 장면의 모든 요소에 적용되어야 하므로 일반적으로 요소와 같은 3차원 콘텐츠의 루트에 Page 적용됩니다. 효과는 이 요소의 자식에 의해 상속됩니다. PerspectiveTransform3D 는 기본적으로 UI 요소가 상주하는 Z=0 평면의 좌표를 유지합니다. 따라서 PerspectiveTransform3D (루트 요소에서 상속됨) 요소가 Z=0 평면 밖으로 이동하는 요소에 의해 CompositeTransform3D서도 변환되는 경우에만 요소의 모양에 영향을 줍니다.

CompositeTransform3D 는 회전, 배율 및 변환을 포함하여 요소의 아핀 3차원 변환 그룹을 나타냅니다. 이 클래스는 3차원 공간에서 요소를 배치하는 데 사용됩니다.

다음은 서브클래스를 사용하여 UI에 Transform3D 대한 3차원 효과를 달성하는 예제입니다.

<StackPanel Orientation="Horizontal">
    <StackPanel.Transform3D>
        <PerspectiveTransform3D />
    </StackPanel.Transform3D>

    <Rectangle Width="300" Height="200" Fill="CornflowerBlue" />

    <Rectangle Width="300" Height="200" Fill="CadetBlue" Margin="10">
        <Rectangle.Transform3D>
            <CompositeTransform3D RotationY="-30" TranslateZ="-75" CenterX="150" />
        </Rectangle.Transform3D>
    </Rectangle>

    <Rectangle Width="300" Height="200" Fill="OrangeRed">
        <Rectangle.Transform3D>
            <CompositeTransform3D TranslateZ="-150" />
        </Rectangle.Transform3D>
    </Rectangle>
</StackPanel>

이 예제에서는 루트 PerspectiveTransform3D StackPanel 에 연결되고 패널의 자식에 대한 공유 큐브 뷰포트를 제공합니다.

• Rectangle 왼쪽에는 변환이 없으므로 정상적으로 표시됩니다.
• Rectangle 가운데에서 중앙 축에 대해 -30도 회전하고 다시 75픽셀로 변환되어 오른쪽 가장자리의 Z 좌표가 -150픽셀입니다.
• 오른쪽의 경우 Rectangle 150픽셀로 변환됩니다.

세 사각형의 가장자리는 일반적인 관점을 공유하기 때문에 연속된 것처럼 보입니다.

CompositeTransform3D 애니메이션

독립적으로 각 속성에 애니메이션 효과를 적용할 CompositeTransform3D 수 있습니다. 애니메이션에 대한 자세한 내용은 Storyboarded 애니메이션 및 키 프레임 및 감속/가속 함수 애니메이션을 참조하세요.

이 예제에서는 애니메이션과 속성을 적용 RotationY TranslateZ 하여 중간 사각형이 제자리에 놓이는 것처럼 보이게 합니다. 애니메이션이 중지된 최종 결과는 이전 예제와 동일합니다.

<StackPanel Orientation="Horizontal" Loaded="StackPanel_Loaded">
    <StackPanel.Resources>
        <Storyboard x:Name="rect2Storyboard">
            <DoubleAnimation 
                Storyboard.TargetName="rectangle2"
                Storyboard.TargetProperty="(UIElement.Transform3D).(CompositeTransform3D.RotationY)"
                From="0" To="-30" Duration="0:0:5"/>
            <DoubleAnimation
                Storyboard.TargetName="rectangle2"
                Storyboard.TargetProperty="(UIElement.Transform3D).(CompositeTransform3D.TranslateZ)"
                From="175" To="-75" Duration="0:0:10"/>
        </Storyboard>
    </StackPanel.Resources>
    <StackPanel.Transform3D>
        <PerspectiveTransform3D />
    </StackPanel.Transform3D>

    <Rectangle Width="300" Height="200" Fill="CornflowerBlue" />

    <Rectangle x:Name="rectangle2" Width="300" Height="200" Fill="CadetBlue" Margin="10">
        <Rectangle.Transform3D>
            <CompositeTransform3D CenterX="150" />
        </Rectangle.Transform3D>
    </Rectangle>

    <Rectangle Width="300" Height="200" Fill="OrangeRed">
        <Rectangle.Transform3D>
            <CompositeTransform3D TranslateZ="-150" />
        </Rectangle.Transform3D>
    </Rectangle>
</StackPanel>

private void StackPanel_Loaded(object sender, RoutedEventArgs e)
{
    rect2Storyboard.Begin();
}

Transform3D 및 PlaneProjection

Windows 10 이전에는 3차원 효과를 만드는 유일한 방법은 속성을 설정하는 Projection 것이었습니다. 사용하는 Projection경우 3차원 변환은 XAML 트리 아래로 상속되지 않습니다. 따라서 Projection 요소가 공유 큐브 뷰포트를 기준으로 하지 않고 로컬 좌표로 변환되는 효과를 적용하는 데만 적합합니다. 로컬 요소에 설정 PerspectiveTransform3D 하여 동일한 효과를 달성할 수 있습니다. 따라서 가장 간단한 3차원 효과를 제외한 모든 효과와 공유 큐브 뷰가 필요할 때마다 Transform3D를 사용하는 것이 좋습니다.

참고

Transform3D는 요소가 그려지는 순서에 영향을 주지 않습니다. Z축을 따라 뷰어에서 멀리 떨어진 요소는 더 가까운 요소 위에 렌더링될 수 있습니다. Canvas.ZIndex 연결된 속성 및 XAML 시각적 트리의 요소 위치를 사용하여 UI에서 요소의 그리기 순서를 관리할 수 있습니다.

추가 정보

• PerspectiveTransform3D
• CompositeTransform3D
• PlaneProjection