admin管理员组

文章数量:1530518

  perspective（透视） 属性指定了眼睛与translateZ（0）的距离，其中括号内的值的>0，则看起来比正常盒子大（但实际值并没有改变，只是看起来大），括号内的值的<0，则看起来比正常盒子小（同样实际值没有改变，只是看起来小了一点）。

 举个简单的例子，如果想创建特别深的视域，仿照变焦镜头的效果，可以声明perspective: 2500px，如果想让深度浅一些，模仿鱼眼镜头的近景效果，可以声明perspective: 200px。
 

在2D平面产生近大远小视觉立体，但是只是效果二维的。

对透视来说：

1.在2D平面产生近大远小视觉立体，但是只是效果二维的


2.如果想要在网页产生3D效果需要透视(理解成3D物怵投影在2D平面内)。膜拟人类的视觉位置，可认为安排一只眼睛去看


3.透视我们也称为视距∶视距就是人的眼睛到屏幕的距离

 

4.距离视觉点越近的在电脑平面成像越大。越远成像越小


5.透视的单位是像素

如下图所示：

从左到右依次代表着人的眼睛，真实物体的大小，你看起来的投影到屏幕上的大小

以上情况都是值大于0的时候，你的眼睛看起来的大小会比真实物体的大小要大

还有一种是小于0的情况，如图所示：

 图中下面的这个图形就是小于0的情况，真实物体为负值，看起来就变小了，也就是所谓的近大远小

古时成语 一叶障目就是差不多这个原理，叶子离眼睛太近，导致什么都看不见

好了，接下来上代码

此时并没有给img添加translateZ（）的属性，默认为0，可以看出来此时用测量工具量出来离顶部有一百多px，

 此时可以看出来并没有什么区别，同样，我要是给div加一个透视，但是并不给img添加translateZ，也是看起来没有区别的。

但是我要是把这两个属性值都给填上，看看效果：

 可以明显看出来图片看起来变大了，当然也是看起来，实际图片大小值并没有改变

 再来看看translateZ为负值的效果：

 明显的距离顶部远了不少，不过也只是看起来，图片大小并没有改变。

那肯定有人问了，透视是不是可以无限大，也可以无限小，当然可以的（但是不能为负数），只不过那样的话你就什么都看不见了。毕竟近大远小，太近的话反而什么都看不见了

下图为透视太大时，什么都看不见，浏览器给了个滚动条，自己去体会。。

 

最后，需要注意的是：

透视写在被观察元素的父盒子上面的
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z︰就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

 ps:

1.代码中有个过渡属性，那个与本文内容无关，只是当时测着玩写上去的，写完此博客才发现有那个东西，大家看时忽略就行

2.若是哪里有错误，请指正

 

本文标签： 浅谈透视效果perspective

版权声明：本文标题：浅谈perspective（透视）效果 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1725277110a1016154.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。