# XAML UI 的 3D 透視效果3-D perspective effects for XAML UI

``````<StackPanel Margin="35" Background="Gray">
<StackPanel.Projection>
<PlaneProjection RotationX="-35" RotationY="-35" RotationZ="15"  />
</StackPanel.Projection>
<TextBlock Margin="10">Type Something Below</TextBlock>
<TextBox Margin="10"></TextBox>
<Button Margin="10" Content="Click" Width="100" />
</StackPanel>
``````

## PlaneProjection 類別PlaneProjection class

``````<Image Source="kid.png">
<Image.Projection>
<PlaneProjection RotationX="-35"   />
</Image.Projection>
</Image>
``````

RotationY 屬性是繞著旋轉中心的 y 軸轉動。The RotationY property rotates around the y-axis of the center of rotation.

``````<Image Source="kid.png">
<Image.Projection>
<PlaneProjection RotationY="-35"   />
</Image.Projection>
</Image>
``````

RotationZ 屬性是繞著旋轉中心的 z 軸轉動 (與物件平面呈直角的一條線)。The RotationZ property rotates around the z-axis of the center of rotation (a line that is perpendicular to the plane of the object).

``````<Image Source="kid.png">
<Image.Projection>
<PlaneProjection RotationZ="-45"/>
</Image.Projection>
</Image>
``````

CenterOfRotationX 會沿著與物件平行的 X 軸移動旋轉中心，而 CenterOfRotationY 則是沿著物件 Y 軸移動旋轉中心。CenterOfRotationX moves the center of rotation along the x-axis parallel to the object while CenterOfRotationY moves the center or rotation along the y-axis of the object. 下一個圖例示範 CenterOfRotationY 使用不同值的效果。The next illustrations demonstrate using different values for CenterOfRotationY.

``````<Image Source="kid.png">
<Image.Projection>
<PlaneProjection RotationX="-35" CenterOfRotationY="0.5" />
</Image.Projection>
</Image>
``````

CenterOfRotationY = "0.5" (預設值)CenterOfRotationY = "0.5" (default)

``````<Image Source="kid.png">
<Image.Projection>
<PlaneProjection RotationX="-35" CenterOfRotationY="0.1"/>
</Image.Projection>
</Image>
``````

CenterOfRotationY = "0.1"CenterOfRotationY = "0.1"

``````<Image Source="kid.png">
<Image.Projection>
<PlaneProjection RotationY="-35" CenterOfRotationX="0.5" />
</Image.Projection>
</Image>
``````

CenterOfRotationX = "0.5" (預設值)CenterOfRotationX = "0.5" (default)

``````<Image Source="kid.png">
<Image.Projection>
<PlaneProjection RotationY="-35" CenterOfRotationX="0.5" />
</Image.Projection>
</Image>
``````

CenterOfRotationX = "0.9" (右側邊緣)CenterOfRotationX = "0.9" (right-hand edge)

## 放置物件Positioning an object

• LocalOffsetX 使物件沿著旋轉物件平面的 x 軸移動。LocalOffsetX moves an object along the x-axis of the plane of a rotated object.
• LocalOffsetY 使物件沿著旋轉物件平面的 y 軸移動。LocalOffsetY moves an object along the y-axis of the plane of a rotated object.
• LocalOffsetZ 使物件沿著旋轉物件平面的 z 軸移動。LocalOffsetZ moves an object along the z-axis of the plane of a rotated object.
• GlobalOffsetX 使物件沿著與螢幕對齊的 x 軸移動。GlobalOffsetX moves an object along the screen-aligned x-axis.
• GlobalOffsetY 使物件沿著與螢幕對齊的 y 軸移動。GlobalOffsetY moves an object along the screen-aligned y-axis.
• GlobalOffsetZ 使物件沿著與螢幕對齊的 z 軸移動。GlobalOffsetZ moves an object along the screen-aligned z-axis.

LocalOffsetXLocalOffsetY 以及 LocalOffsetZ 屬性可在物件旋轉之後，沿著物件平面的各軸平移物件。The LocalOffsetX, LocalOffsetY, and LocalOffsetZ properties translate an object along the respective axis of the plane of the object after it has been rotated. 因此，旋轉物件的方式會決定平移物件的方向。Therefore, the rotation of the object determines the direction that the object is translated. 為了示範此概念，下一個範例以動畫顯示 0 到 400 度的 LocalOffsetX，以及 0 到 65 度的 RotationYTo demonstrate this concept, the next sample animates LocalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

LocalOffsetY 的運作方式與 LocalOffsetX 類似，不過是沿著垂直軸移動，因此，變更 RotationX 會影響 LocalOffsetY 移動物件的方向。LocalOffsetY works similarly to LocalOffsetX, except that it moves along the vertical axis, so changing RotationX affects the direction LocalOffsetY moves the object. 下一個範例會動畫顯示 0 到 400 度的 LocalOffsetY，以及 0 到 65 度的 RotationXIn the next sample, LocalOffsetY is animated from 0 to 400 and RotationX from 0 to 65 degrees.

LocalOffsetZ 可平移與物件平面呈直角的物件，就像從物件背面直接穿透中心朝向您繪製一個向量。LocalOffsetZ translates the object perpendicular to the plane of the object as though a vector was drawn directly through the center from behind the object out toward you. 為了示範 LocalOffsetZ 的運作方式，下一個範例將以動畫顯示 0 到 400 度的 LocalOffsetZ，以及 0 到 65 度的 RotationXTo demonstrate how LocalOffsetZ works, the next sample animates LocalOffsetZ from 0 to 400 and RotationX from 0 to 65 degrees.

GlobalOffsetXGlobalOffsetY 以及 GlobalOffsetZ 屬性會沿著相對於螢幕的各軸平移物件。The GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ properties translate the object along axes relative to the screen. 也就是說，物件移動沿著的軸與物件套用的任何旋轉無關，這一點與區域位移屬性不同。That is, unlike the local offset properties, the axis the object moves along is independent of any rotation applied to the object. 若您只想沿著螢幕的 x、y 或 z 軸移動物件，這些屬性就非常實用，可以讓您不用擔心物件所套用的旋轉。These properties are useful when you want to simply move the object along the x-, y-, or z-axis of the screen without worrying about the rotation applied to the object.