前言：對於可是元素，我們常見有三種變化，旋轉、平移、面積
一、 旋轉（RotateTransform）
<RotateTransform CenterX="100" CenterY="50" Angle="180"></RotateTransform>
CenterX和CenterY表示旋轉中心，默認為原點及可視元素的左上角，
Angle表示旋轉角度
二、平移（TranslateTransform）
<TranslateTransform X="10" Y="20"></TranslateTransform>
相對於原點移動的位置
三、縮放（ScaleTransform）
<ScaleTransform CenterX="100" CenterY="50" ScaleX="4" ScaleY="5"/>
標明旋轉中心的位置
四、旋轉（斜角SkewTransform）
<SkewTransform CenterX="20" CenterY="100" AngleX="45" AngleY="0"/>
表示沿着x軸或者Y軸推斜，常用來模擬3D視覺效果，例如可以通過（五）中的組合實現傾斜的藝術字等
五、變換集合（TransformGroup）
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="100" CenterY="50" Angle="180"></RotateTransform>
<TranslateTransform X="10" Y="20"></TranslateTransform>
<ScaleTransform CenterX="100" CenterY="50" ScaleX="4" ScaleY="5"/>
</TransformGroup>
</Ellipse.RenderTransform>
內部可以有無數個按順序進行的變換
六、矩陣變換（MatrixTransform）
本質是其他變形類的底層實現的代碼，其他的類都是基於這個類的擴展，以讓用戶可以更加簡單方便的應用，至於MatrixTransform則是通過一種矩陣算法來進行運算得到相應的變形的效果的。
矩陣中第三列的值是固定不變。
原理：
原坐標（x0，y0）通過這個3*3矩陣，通過矩陣乘法可得到坐標 (x0 * M11+x0 * M21,y0 * M12+y0 * M22)之后，再加上 (OffsetX,OffsetY) 即可得到新坐標（x1，y1）。也即是說最終坐標 (x1,y1) : x1 = x0 * M11 + x0 * M21 + OffsetX , y1 = y0 * M12 + y0 * M22 + OffsetY.
<!--源碼用法--> <MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></MatrixTransform>
下面使用MatrixTransform矩陣變換實現以上五種基本的變換效果。
<Canvas Width="1200" Height="300">
<StackPanel Orientation="Horizontal" Canvas.Top="50">
<!-- TranslateTransform 平移 -->
<Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<MatrixTransform Matrix="1 0 0 1 -80 30"></MatrixTransform>
</Image.RenderTransform>
</Image>
<!-- RotateTransform 旋轉 -->
<Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- 90°旋轉 -->
<MatrixTransform Matrix="0 1 -1 0 30 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
<!-- ScaleTransform 縮放 -->
<Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!--放大1.5倍-->
<MatrixTransform Matrix="1.5 0 0 1.5 -80 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
<!-- SkewTransform 扭曲傾斜 -->
<Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- x軸傾斜 -->
<MatrixTransform Matrix="1 0 1 1 -80 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
<!-- TransformGroup 扭曲、縮放 -->
<Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- x軸傾斜 -->
<!--放大1.5倍-->
<MatrixTransform Matrix="1.5 0 1 1.5 -120 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
</StackPanel>
</Canvas>
七、LayoutTransform
- LayoutTransform 屬性 是在元素布局的過程中進行變換（布局完成之前）
- RenderTransform 屬性 是在元素布局完成之后進行變換（渲染顯示之前）
由於LayoutTransform 在布局計算之前進行變換計算，因此如果LayoutTransform 發生了更改，比如動畫更改，就會重新引發容器進行布局計算，簡單來說LayoutTransform 的每一次變化都需要進行一次重新布局，
而RenderTransform卻不會。RenderTransform計算是在布局計算完成之后進行，它不會因此重新布局。因此默認情況下，推薦使用RenderTransform進行變換，只有非常特殊的情況下才會使用LayoutTransform 。
進行了變換之后控件的ActualWidth和ActualHeight屬性值是不會改變的。可以理解為只是做了一個變化，並沒有實際改變控件的大小。
RenderTransformOrigin 制定了變換原點
有不懂的可以加QQ群：568055323交流哦