CSS 效果部落格位址：
3D 穿梭效果？使用 CSS 輕松搞定 - ChokCoco - 部落格園 (cnblogs.com)
UWP效果部落格位址
3D 穿梭效果？使用 UWP 也能搞定 - dino.c - 部落格園 (cnblogs.com)
大佬們真實登峰造極啊。
真是能學到很多東西啊。
我也就湊湊熱鬧，用WPF來試試，效果不算太好，勉強過得去吧。
相對CSS和UWP，老牌的WPF對于3D效果的操作是相對繁瑣的。 要首先做出3D模型，接着旋轉XY軸，其次調整Z軸拉伸，最後一步調整FOV。 穿梭效果要靠這Z軸拉伸的數字決定，圖中是10-20。
當然最難的是動畫的首尾銜接。
我們來一步一步的做。
制作3D模型
這一塊可以直接用不用2D控件其實沒啥可以研究，是以就直接是3D模型，讓圖檔以貼圖的形式存在。
至于3D模型制作，總結一點就是由左到右開始。
1.Positions
3D模型是三角組成，是以描述一個物體的樣子時候，盡可能畫三角形。每個點就是頂點，如果存在相同的頂點，選擇一個就行。
描述頂點的時候是XYZ，當你正面看物體，物體的Z軸是指向你的方向為正方向。Y軸是向上為正，X軸是向右為正。
這裡值得注意的是，為了友善 ，建議使用左 左下 右下 右上的順序去定義點。
這個模型的頂點定義就是 P1(x,y,z), P2(x,y,z) ,P3(x,y,z) ,P4(x,y,z)
2.TriangleIndices
這個就是 描述 這些頂點是如何組成三角形。當我們認為一個面是正面時，要記得逆時針定義頂點集合下标。頂點集合就是Positions，内容就是你輸入的坐标點，下标由0開始。
背面為順時針。
3.TextureCoordinates
這個是材質的定位順序，這個比較2D坐标系，和其他的不同。也就是左上角為0，0 右下角為1，1，也就是普通的螢幕坐标系
做好模型，要做四個哦。
旋轉3d模型
這個就比較有意思了，上面模型做好了四個，我們要組成四個面，也就是旋轉Y軸，旋轉X軸，但是方向是不一樣的。旋轉我們使用Transform就可以了。
看起來還行。
我們來做四個圖檔并試試。
友善調試，我們帶着進度條。
資源
運作，看看
看起來，有點味道了。
剩下就是調試動畫了。
我們想要首尾銜接的動畫，實際上就是要兩段動畫看不出首尾的差別。參考大佬們的基本思路，依靠透明度，延遲播放讓首尾看不出差別。
也就是說要
這裡呢，我們純用XAML來實作這個方案。
首先要解決定時問題，首先頁面加載時，我們通過動畫修改某個對象的某個值 ，這個對象上存在一個觸發器，監控這個對象并開始定時，之後播放動畫。
修改值，我們要用ObjectAnimationUsingKeyFrames動畫。
觸發器，數值觸發器，因為可以綁定。
整個過程中，最重要的就是時間線，兩組動畫再何時出現，何時隐藏。
最終代碼
這樣呢，我們就不用任何C#代碼來完成這個效果了。
必須承認，在開頭0秒時做的不是很好，略有重影，是以還有很多地方需要學習。