實現3d效果,我們理所應當的在三維的座標下實現。
1.perspective屬性：透視， 沒有透視 哪裏來的3dm呢.當爲元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
2.perspective-origin：定義我們看向屏幕的視點
perspective-origin: x-axis y-axis;x-axis定義該視圖在 x 軸上的位置。默認值：50%。
y-axis定義該視圖在 y 軸上的位置。默認值：50%。
3.transform-style: preserve-3d
transform-style屬性也是3D效果中經常使用的，其兩個參數，flat|preserve-3d. 前者flat爲默認值，表示平面的；後者preserve-3d表示3D透視
4.通過transition / transform 來體現3d效果
Transitions
具體屬性：
transition-property：用於指定過渡的性質，比如 transition-property:backgrond 就是指 backgound 參與這個過渡
transition-duration：用於指定這個過渡的持續時間
transition-delay：用於制定延遲過渡的時間
transition-timing-function：用於指定過渡類型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
Transform
再來看看 Transform，其實就是指拉伸，壓縮，旋轉，偏移等等一些圖形學裏面的基本變換。
首先我們要知道transform-origin屬性
這裏用rotate屬性來說明：如下繞紅點旋轉
rotate：指定對象的2D rotateing（2D旋轉），第一個參數對應X軸，第二的參數對應Y軸，如果第二個參數未提供，則默認爲0.
.rotate {
-webkit-transform: rotate(30deg);
} skew：指定對象skew transforma（斜切扭曲）
第一個參數對應X軸，第二的參數對應Y軸，如果第二個參數未提供，則默認爲0.
.skew {
-webkit-transform: skew(50deg); //chrome爲例
} 
scale：指定對象的2D scale（2D縮放），第一個參數對應X軸，第二的參數對應Y軸，如果第二個參數未提供，則默認取第一個參數的值.
.scale {
-webkit-transform: scale(0.5, 0.5);
} 
translate：指定對象的2Dtranslate（2D平移），第一個參數對應X軸，第二的參數對應Y軸，如果第二個參數未提供，則默認爲0.
.translate {
-webkit-transform: translate(50px, 50px);
} 
