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 等。
這個屬性有什麼用呢？ 這個屬性是相當於人 的眼睛看哪裡。你沒有設定，也就是預設看父元素 中間的地方。看下面兩張圖的例子，就知道什麼意思啦。
沒有了呢，不用再翻了，謝謝你的閱讀。