perspective
簡單來說，就是設置這個屬性后，那么，就可以模擬出像我們人看電腦上的顯示的元素一樣。比如說， perspective：800px 意思就是，我在離屏幕800px 的地方觀看這個元素。(這個屬性，要設置在父元素上面)
(這個屬性呢，有着很冷門的知識請認真看完呢)
先來看看， 加了perspective 和 沒有加是什么區別， 第一個小方塊，是有加的效果，能明顯的看到空間感了有沒有， 感覺他是真的像在旋轉， 而第二個呢，像是在伸縮。
本章需要知道translateZ 是干嘛的，如果不懂什么是 translate Z請點擊→ css3系列之transform詳解translate
那么思考一個問題，transform：translateZ 呢，可以增加 Z軸的距離， 那么Z軸越大，是不是也就代表着，這個元素，離我們的距離越近？ 那么，你把一張圖片，貼到你臉上，有什么效果？ 是不是非常大？有人可能會問，這兩者之間有什么關系嗎？ 肯定是有的，這個 perspective 配合 transform：translateZ 就有這種效果， 我們來看看。(先記着，我們設置了perspective：800px，那么來看看 Z到800px 有什么效果)
有沒有發現，臨近 800px 的時候， 圖片突然變黑了， 然后到800px的時候， 圖片消失了。 這又是為啥呢？ 其實很像我們現實中的例子一樣，一張遠處的圖片，慢慢的移動到你臉上， 你會看見圖片越來越大，貼到你臉上的時候，是不是 你就看不見了？ 到800px 的時候，你人都和圖片 融合在一體了， 如果801px 是不是你都穿過這張圖片了？道理是一樣的啦。
那么transform：translateZ， 到負數的時候， 是不是值越小，圖片離我們越遠，同理的 圖片也就越小。
但是！如果你真的認為 perspective 這個屬性這么簡單的話，那么你就太天真了。按照我們的思路繼續，如果 perspective： 這個值，越小，是不是我們就離屏幕越近， 那么 圖片也會越大，(translateZ 是移動圖片， perspective是移動 人 和屏幕的距離，這么想也是沒問題的哈。對吧，那么把translateZ(0px)。然后增加 perspective 試試看。 )
然后，你會驚奇的發現，咦？ 好像無論是增加，還是減少，圖片都沒有任何變化。 這個時候，先賣個關子，接着看下個案例，把 translateZ(-100px) 設置成 負值。(正常，按照我們的想法，是不是 Z的值是正數，說明這個圖片，離我們越近，那么反之，負值，離我們越遠對吧) 那么這次我們不移動 translateZ 了， 設置好Z 值為-100px 之后，移動perspective的值，把他的值變小，(正常來說，值越小，是不是就代表 我們離屏幕越近， 看的東西也就越大對吧)
然后，你又會驚奇的發現， 怎么圖片不是越來越大呢? 我們離屏幕越大，圖片應該越大才對啊， 怎么變小了呢？
其實把。這里我們一直誤導一個情況，我們看到的，並不是圖片本身，而是圖片的投影。 是不是有點暈了，投影是什么鬼， 沒事，看下面的圖解。
第一個情況，translateZ 的值越大，圖片越大。
第二個情況，translateZ 的值越小，圖片越小。
第三個情況，translateZ 為0的時候，為什么移動我們perspective 的值，圖片的大小沒有改變呢？
第四個情況，為什么translateZ 為負數之后，增加 perspective 的值后，圖片不是變大， 反而變小呢？
好了，最后補充一點，這個perspective 屬性呢，要放在父級身上。然后還有一個屬性perspective-origin，這個屬性也是設置在父級身上。
這個屬性呢，默認值是 center center，也就是 居中。這兩個參數呢，是根據自身來定位的， 0px 0px 代表着元素的左上角，center center代表着元素的中間點。可以設置像素 50px 也可設置百分比 50%，還可以設置 top right left bottom center 等。
這個屬性有什么用呢？ 這個屬性是相當於人 的眼睛看哪里。你沒有設置，也就是默認看父元素 中間的地方。看下面兩張圖的例子，就知道什么意思啦。
沒有了呢，不用再翻了，謝謝你的閱讀。