perspective
簡單來說，就是設(shè)置這個屬性后，那么，就可以模擬出像我們?nèi)丝措娔X上的顯示的元素一樣。比如說， perspective：800px 意思就是，我在離屏幕800px 的地方觀看這個元素。(這個屬性，要設(shè)置在父元素上面)
1.png
先來看看， 加了perspective 和 沒有加是什么區(qū)別， 第一個小方塊，是有加的效果，能明顯的看到空間感了有沒有， 感覺他是真的像在旋轉(zhuǎn)， 而第二個呢，像是在伸縮。
2.gif
那么思考一個問題，transform：translateZ 呢，可以增加 Z軸的距離， 那么Z軸越大，是不是也就代表著，這個元素，離我們的距離越近？ 那么，你把一張圖片，貼到你臉上，有什么效果？ 是不是非常大？有人可能會問，這兩者之間有什么關(guān)系嗎？ 肯定是有的，這個 perspective 配合 transform：translateZ 就有這種效果， 我們來看看。(先記著，我們設(shè)置了perspective：800px，那么來看看 Z到800px 有什么效果)
3.gif
有沒有發(fā)現(xiàn)，臨近 800px 的時候， 圖片突然變黑了， 然后到800px的時候， 圖片消失了。 這又是為啥呢？ 其實很像我們現(xiàn)實中的例子一樣，一張遠(yuǎn)處的圖片，慢慢的移動到你臉上， 你會看見圖片越來越大，貼到你臉上的時候，是不是 你就看不見了？ 到800px 的時候，你人都和圖片 融合在一體了， 如果801px 是不是你都穿過這張圖片了？道理是一樣的啦。
那么transform：translateZ， 到負(fù)數(shù)的時候， 是不是值越小，圖片離我們越遠(yuǎn)，同理的 圖片也就越小
4.gif
但是！如果你真的認(rèn)為 perspective 這個屬性這么簡單的話，那么你就太天真了。按照我們的思路繼續(xù)，如果 perspective： 這個值，越小，是不是我們就離屏幕越近， 那么 圖片也會越大，(translateZ 是移動圖片， perspective是移動 人 和屏幕的距離，這么想也是沒問題的哈。對吧，那么把translateZ(0px)。然后增加 perspective 試試看.)
5.gif
然后，你會驚奇的發(fā)現(xiàn)，咦？ 好像無論是增加，還是減少，圖片都沒有任何變化。 這個時候，先賣個關(guān)子，接著看下個案例，把 translateZ(-100px) 設(shè)置成 負(fù)值。(正常，按照我們的想法，是不是 Z的值是正數(shù)，說明這個圖片，離我們越近，那么反之，負(fù)值，離我們越遠(yuǎn)對吧) 那么這次我們不移動 translateZ 了， 設(shè)置好Z 值為-100px 之后，移動perspective的值，把他的值變小，(正常來說，值越小，是不是就代表 我們離屏幕越近， 看的東西也就越大對吧)
然后，你又會驚奇的發(fā)現(xiàn)， 怎么圖片不是越來越大呢? 我們離屏幕越大，圖片應(yīng)該越大才對啊， 怎么變小了呢？
其實把。這里我們一直誤導(dǎo)一個情況，我們看到的，并不是圖片本身，而是圖片的投影。 是不是有點(diǎn)暈了，投影是什么鬼， 沒事，看下面的圖解。
第一個情況，translateZ 的值越大，圖片越大。
7.png
第二個情況，translateZ 的值越小，圖片越小。
6.png
第三個情況，translateZ 為0的時候，為什么移動我們perspective 的值，圖片的大小沒有改變呢？
8.png
第四個情況，為什么translateZ 為負(fù)數(shù)之后，增加 perspective 的值后，圖片不是變大， 反而變小呢？
9.png
