第99天 CSS3中透視perspective

當元素向後移動的時候，透視點與元素所處位置的連線和螢幕的焦點，就是元素在螢幕上的投影。與原來的頭像大小相比變小了。

與之前的過程相同，視點與移動後的元素的連線與螢幕的焦點就是在螢幕上的呈現的元素的大小，與元素相比較變大了。

上圖擷取的是x=0平面，可以從圖中看到視點對影象高度投影的影響，由於視點原點的變化導致視點和最高點最低點的角度發上變化，在螢幕上的投影出現了偏移，對於寬度的影響是相同的，影象的輪廓也就從一定程度上表現了影象每乙個畫素的變化。

當元素沿著z軸向前移動的時候，與視點的距離越小，視點和元素的最高點和最低點所稱角度最大，放大倍數越大。總結：視距越小放大效果越明顯，translatez越大放大效果越明顯。

當元素沿著z軸移動的距離大於視距後。元素移動到視點後方，固無法投影在螢幕上，所以螢幕上沒有呈現。translatez>perspective螢幕上無法呈現影象。

perspective 的使用有多種情景，大家可以了解過後按需選擇自己所需要。

使用在父元素還是子元素

其中使用不同元素作為視角物件的過程,就是把perspective屬性加在不同的元素上。

仔細**以舞台作為視角物件時，子元素不僅呈現影象不同，而且還會消失。原因如下圖擷取y=0平面，及瀏覽器的俯檢視，視點在瀏覽器前方，元素現在在z=0平面上，整合現在瀏覽器上，視點和元素不同部位的連線，就是我們的視線，當元素中子元素的旋轉角度與該視線重合，由於其沒有寬度我們就看不見這個子元素了。

書寫方式不同的定義

perspective有兩種定義方式，如下

.class .class

個人關於兩種書寫方式的不同的理解是，單獨定義的perspective只在初次渲染時，投影在螢幕上。寫在transform中的perspective會根據transform動畫的變化來進行重新的渲染。所以當使用js或css3進行動畫時，盡量選擇後一種定義方式。

使用的注意事項