Before
- 透視原理： 近大遠(yuǎn)小 掏颊。
- 瀏覽器透視：把近大遠(yuǎn)小的所有圖像送膳，透視在屏幕上普碎。
- 理解瀏覽器的坐標(biāo)系：瀏覽器平面為 Z=0的平面吼肥，坐標(biāo)原點默認(rèn)為圖片的中心，可以通過更改透視原點進(jìn)行更改。
- perspective：視距缀皱，表示視點距離屏幕的長短斗这。視點，用于模擬透視效果時人眼的位置啤斗。
- perspectiveOrigin: 個人理解為視點的xy坐標(biāo)表箭，perspective則是z坐標(biāo)，三者可以再三維中確定 視點的唯一位置钮莲。官方詳情可見
瀏覽器透視原理圖
當(dāng)元素向后移動的時候免钻，透視點與元素所處位置的連線和屏幕的焦點，就是元素在屏幕上的投影崔拥。與原來的頭像大小相比變小了极舔。
與之前的過程相同，視點與移動后的元素的連線與屏幕的焦點就是在屏幕上的呈現(xiàn)的元素的大小链瓦，與元素相比較變大了拆魏。
上圖截取的是X=0平面，可以從圖中看到視點對圖像高度投影的影響澡绩，由于視點原點的變化導(dǎo)致視點和最高點最低點的角度發(fā)上變化稽揭，在屏幕上的投影出現(xiàn)了偏移俺附，對于寬度的影響是相同的肥卡，圖像的輪廓也就從一定程度上表現(xiàn)了圖像每一個像素的變化。
通過原理圖理解規(guī)律
當(dāng)元素沿著Z軸向前移動的時候事镣，與視點的距離越小步鉴，視點和元素的最高點和最低點所稱角度最大，放大倍數(shù)越大璃哟》兆粒總結(jié)：視距越小放大效果越明顯，translateZ越大放大效果越明顯随闪，可參考他人博客中的例子阳似。
當(dāng)元素沿著Z軸移動的距離大于視距后。元素移動到視點后方铐伴，固無法投影在屏幕上撮奏，所以屏幕上沒有呈現(xiàn)。translateZ>perspective 屏幕上無法呈現(xiàn)圖像当宴。
perspective 使用方法
perspective 的使用有多種情景畜吊，大家可以了解過后按需選擇自己所需要。
使用在父元素還是子元素
還是先參考他人博客的例子
其中使用 不同元素作為視角對象的過程,就是把perspective屬性加在不同的元素上户矢。
仔細(xì)觀看以舞臺作為視角對象時玲献，子元素不僅呈現(xiàn)圖像不同，而且還會消失。原因如下圖截取Y=0平面 捌年，及瀏覽器的俯視圖瓢娜，視點在瀏覽器前方，元素現(xiàn)在在Z=0平面上礼预，集成現(xiàn)在瀏覽器上恋腕，視點和元素不同部位的連線，就是我們的視線逆瑞，當(dāng)元素中子元素的旋轉(zhuǎn)角度與該視線重合荠藤，由于其沒有寬度 我們就看不見這個子元素了。
書寫方式不同的定義
perspective有兩種定義方式获高，如下
.class{
perspective: 800px;
}
.class{
transform: prespective(800px)
}
個人關(guān)于兩種書寫方式的不同的理解是哈肖，單獨定義的perspective只在初次渲染時，投影在屏幕上念秧。 寫在transform中的perspective會根據(jù)transform動畫的變化來進(jìn)行重新的渲染淤井。所以當(dāng)使用js或Css3進(jìn)行動畫時，盡量選擇后一種定義方式摊趾。
使用的注意事項
perspective的定義要在其他3d變幻之前币狠，否則無效 如translateZ等，這個也很好理解砾层，要首先確定眼睛所在的位置漩绵，在屏幕上的成像才會有此計算。
呈現(xiàn)3d效果的父元素要添加transform-style：preserver-3d屬性肛炮。該屬性定義該元素的子元素按照3d效果來呈現(xiàn)止吐。
backface-visibility 用來定義元素不是正面朝向視點時的可視情況 。
AfaterALL
以上內(nèi)容均加入很多個人理解侨糟，喜迎大神斧正碍扔。
