第99天：CSS3中透視perspective
CSS3中透視perspective
- 透視原理： 近大遠小 。
- 瀏覽器透視：把近大遠小的所有圖像，透視在屏幕上。
- 理解瀏覽器的坐標系：瀏覽器平面為 Z=0的平面，坐標原點默認為圖片的中心，可以通過更改透視原點進行更改。
- perspective：視距，表示視點距離屏幕的長短。視點，用於模擬透視效果時人眼的位置。
- perspectiveOrigin: 個人理解為視點的xy坐標，perspective則是z坐標，三者可以再三維中確定 視點的唯一位置。
瀏覽器透視原理圖
當元素向後移動的時候，透視點與元素所處位置的連線和屏幕的焦點，就是元素在屏幕上的投影。與原來的頭像大小相比變小了。
與之前的過程相同，視點與移動後的元素的連線與屏幕的焦點就是在屏幕上的呈現的元素的大小，與元素相比較變大了。
上圖截取的是X=0平面，可以從圖中看到視點對圖像高度投影的影響，由於視點原點的變化導致視點和最高點最低點的角度發上變化，在屏幕上的投影出現了偏移，對於寬度的影響是相同的，圖像的輪廓也就從一定程度上表現了圖像每一個像素的變化。
通過原理圖理解規律
當元素沿著Z軸向前移動的時候，與視點的距離越小，視點和元素的最高點和最低點所稱角度最大，放大倍數越大。總結：視距越小放大效果越明顯，translateZ越大放大效果越明顯。
當元素沿著Z軸移動的距離大於視距後。元素移動到視點後方，固無法投影在屏幕上，所以屏幕上沒有呈現。translateZ>perspective 屏幕上無法呈現圖像。
perspective 使用方法
perspective 的使用有多種情景，大家可以了解過後按需選擇自己所需要。
使用在父元素還是子元素
其中使用 不同元素作為視角對象的過程,就是把perspective屬性加在不同的元素上。
仔細觀看以舞臺作為視角對象時，子元素不僅呈現圖像不同，而且還會消失。原因如下圖截取Y=0平面 ，及瀏覽器的俯視圖，視點在瀏覽器前方，元素現在在Z=0平面上，集成現在瀏覽器上，視點和元素不同部位的連線，就是我們的視線，當元素中子元素的旋轉角度與該視線重合，由於其沒有寬度 我們就看不見這個子元素了。
書寫方式不同的定義
perspective有兩種定義方式，如下
.class{
perspective: 800px;
}
.class{
transform: prespective(800px)
}
個人關於兩種書寫方式的不同的理解是，單獨定義的perspective只在初次渲染時，投影在屏幕上。 寫在transform中的perspective會根據transform動畫的變化來進行重新的渲染。所以當使用js或Css3進行動畫時，盡量選擇後一種定義方式。
使用的註意事項
-
perspective的定義要在其他3d變幻之前，否則無效 如translateZ等，這個也很好理解，要首先確定眼睛所在的位置，在屏幕上的成像才會有此計算。
-
呈現3d效果的父元素要添加transform-style：preserver-3d屬性。該屬性定義該元素的子元素按照3d效果來呈現。
-
backface-visibility 用來定義元素不是正面朝向視點時的可視情況 。
第99天：CSS3中透視perspective