perspective

簡(jiǎn)單來(lái)說(shuō)，就是設(shè)置這個(gè)屬性后,，那么,，就可以模擬出像我們?nèi)丝措娔X上的顯示的元素一樣。比如說(shuō),， perspective：800px   意思就是,，我在離屏幕800px 的地方觀看這個(gè)元素,。(這個(gè)屬性,，要設(shè)置在父元素上面)

(這個(gè)屬性呢,，有著很冷門的知識(shí)請(qǐng)認(rèn)真看完呢)

先來(lái)看看,， 加了perspective  和 沒(méi)有加是什么區(qū)別,， 第一個(gè)小方塊,，是有加的效果,，能明顯的看到空間感了有沒(méi)有,， 感覺(jué)他是真的像在旋轉(zhuǎn),， 而第二個(gè)呢,，像是在伸縮,。

本章需要知道translateZ 是干嘛的,，如果不懂什么是 translate Z請(qǐng)點(diǎn)擊→ css3系列之transform詳解translate

那么思考一個(gè)問(wèn)題,，transform：translateZ  呢,，可以增加  Z軸的距離,， 那么Z軸越大,，是不是也就代表著,，這個(gè)元素，離我們的距離越近,？  那么,，你把一張圖片,，貼到你臉上,，有什么效果,？ 是不是非常大,？有人可能會(huì)問(wèn),，這兩者之間有什么關(guān)系嗎？  肯定是有的,，這個(gè) perspective  配合 transform：translateZ  就有這種效果,， 我們來(lái)看看,。(先記著,，我們?cè)O(shè)置了perspective：800px,，那么來(lái)看看 Z到800px 有什么效果)

有沒(méi)有發(fā)現(xiàn),，臨近 800px 的時(shí)候,， 圖片突然變黑了,， 然后到800px的時(shí)候,， 圖片消失了,。  這又是為啥呢,？   其實(shí)很像我們現(xiàn)實(shí)中的例子一樣,，一張遠(yuǎn)處的圖片，慢慢的移動(dòng)到你臉上,， 你會(huì)看見(jiàn)圖片越來(lái)越大,，貼到你臉上的時(shí)候,，是不是 你就看不見(jiàn)了,？  到800px 的時(shí)候，你人都和圖片 融合在一體了,， 如果801px 是不是你都穿過(guò)這張圖片了？道理是一樣的啦,。

那么transform：translateZ,， 到負(fù)數(shù)的時(shí)候,， 是不是值越小,，圖片離我們?cè)竭h(yuǎn),，同理的 圖片也就越小,。

但是,！如果你真的認(rèn)為 perspective 這個(gè)屬性這么簡(jiǎn)單的話,，那么你就太天真了,。按照我們的思路繼續(xù),，如果 perspective： 這個(gè)值,，越小,，是不是我們就離屏幕越近,， 那么 圖片也會(huì)越大，(translateZ 是移動(dòng)圖片,， perspective是移動(dòng) 人 和屏幕的距離,，這么想也是沒(méi)問(wèn)題的哈,。對(duì)吧,，那么把translateZ(0px),。然后增加 perspective 試試看,。  )

然后，你會(huì)驚奇的發(fā)現(xiàn),，咦,？  好像無(wú)論是增加,，還是減少，圖片都沒(méi)有任何變化,。 這個(gè)時(shí)候,，先賣個(gè)關(guān)子,，接著看下個(gè)案例，把 translateZ(-100px) 設(shè)置成 負(fù)值,。(正常，按照我們的想法,，是不是 Z的值是正數(shù)，說(shuō)明這個(gè)圖片,，離我們?cè)浇?，那么反之,，?fù)值,，離我們?cè)竭h(yuǎn)對(duì)吧)  那么這次我們不移動(dòng) translateZ 了,， 設(shè)置好Z 值為-100px 之后，移動(dòng)perspective的值,，把他的值變小,，(正常來(lái)說(shuō)，值越小,，是不是就代表 我們離屏幕越近,， 看的東西也就越大對(duì)吧)

然后，你又會(huì)驚奇的發(fā)現(xiàn),， 怎么圖片不是越來(lái)越大呢? 我們離屏幕越大,，圖片應(yīng)該越大才對(duì)啊,， 怎么變小了呢？  

其實(shí)把,。這里我們一直誤導(dǎo)一個(gè)情況,，我們看到的,，并不是圖片本身,，而是圖片的投影,。 是不是有點(diǎn)暈了,，投影是什么鬼,， 沒(méi)事,，看下面的圖解,。

第一個(gè)情況,，translateZ 的值越大,，圖片越大,。

第二個(gè)情況,，translateZ 的值越小，圖片越小,。

第三個(gè)情況，translateZ 為0的時(shí)候,，為什么移動(dòng)我們perspective 的值,，圖片的大小沒(méi)有改變呢,？

第四個(gè)情況，為什么translateZ 為負(fù)數(shù)之后,，增加 perspective 的值后,，圖片不是變大， 反而變小呢,？

好了,，最后補(bǔ)充一點(diǎn),，這個(gè)perspective 屬性呢,，要放在父級(jí)身上,。然后還有一個(gè)屬性perspective-origin,，這個(gè)屬性也是設(shè)置在父級(jí)身上,。

這個(gè)屬性呢，默認(rèn)值是 center  center,，也就是 居中,。這兩個(gè)參數(shù)呢，是根據(jù)自身來(lái)定位的,， 0px 0px 代表著元素的左上角,，center center代表著元素的中間點(diǎn)?？梢栽O(shè)置像素 50px  也可設(shè)置百分比 50%,，還可以設(shè)置 top right left bottom center 等。

這個(gè)屬性有什么用呢,？ 這個(gè)屬性是相當(dāng)于人 的眼睛看哪里,。你沒(méi)有設(shè)置,，也就是默認(rèn)看父元素 中間的地方,?？聪旅鎯蓮垐D的例子,，就知道什么意思啦。

沒(méi)有了呢,，不用再翻了,，謝謝你的閱讀。