看了很多人寫的對perspective的理解沾凄,還有有點懵梗醇,打算寫一個自己的理解。
perspective:即為視距撒蟀,可以看作是人的眼睛到屏幕之間的距離
通常是人離屏幕越遠(perspective越大)看到的物體越小叙谨,離屏幕越近(perspective)看到的物體越大
但電腦不知道人離屏幕的距離,電腦默認人物在不改變物體位置的時候(相當于物體就在屏幕上牙肝,與屏幕上的距離為0唉俗,我們稱為原點)改變perspective的大小看到的物體都是物體本身的大小
如果我們改變物體的translateZ的值嗤朴,可以發(fā)現(xiàn):
當translateZ的值為負配椭,且越來越小時(即物體離我們越來越遠),物體也越來越小
當translateZ的值為正雹姊,且越來越大時(即物體離我們越來越近)股缸,物體也越來越大
但是當translateZ的值大于perspective的值時,就看不見物體了吱雏,這就相當于物體已經(jīng)移動到人腦袋后面了敦姻,當然看不見了~
參考文檔:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
參考demo地址:http://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html