看了很多人寫的對(duì)perspective的理解,還有有點(diǎn)懵,打算寫一個(gè)自己的理解。
perspective:即為視距,可以看作是人的眼睛到屏幕之間的距離
通常是人離屏幕越遠(yuǎn)(perspective越大)看到的物體越小,離屏幕越近(perspective)看到的物體越大
但電腦不知道人離屏幕的距離,電腦默認(rèn)人物在不改變物體位置的時(shí)候(相當(dāng)于物體就在屏幕上,與屏幕上的距離為0,我們稱為原點(diǎn))改變perspective的大小看到的物體都是物體本身的大小
如果我們改變物體的translateZ的值,可以發(fā)現(xiàn):
當(dāng)translateZ的值為負(fù),且越來越小時(shí)(即物體離我們?cè)絹碓竭h(yuǎn)),物體也越來越小
當(dāng)translateZ的值為正,且越來越大時(shí)(即物體離我們?cè)絹碓浇矬w也越來越大
但是當(dāng)translateZ的值大于perspective的值時(shí),就看不見物體了,這就相當(dāng)于物體已經(jīng)移動(dòng)到人腦袋后面了,當(dā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