看了很多人写的对perspective的理解,还有有点懵,打算写一个自己的理解。
perspective:即为视距,可以看作是人的眼睛到屏幕之间的距离
通常是人离屏幕越远(perspective越大)看到的物体越小,离屏幕越近(perspective)看到的物体越大
但电脑不知道人离屏幕的距离,电脑默认人物在不改变物体位置的时候(相当于物体就在屏幕上,与屏幕上的距离为0,我们称为原点)改变perspective的大小看到的物体都是物体本身的大小
如果我们改变物体的translateZ的值,可以发现:
当translateZ的值为负,且越来越小时(即物体离我们越来越远),物体也越来越小
当translateZ的值为正,且越来越大时(即物体离我们越来越近),物体也越来越大
但是当translateZ的值大于perspective的值时,就看不见物体了,这就相当于物体已经移动到人脑袋后面了,当然看不见了~
参考文档:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
参考demo地址:http://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html