浅谈perspective（透视）效果
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（透视）效果相关推荐
- 浅谈图片蒙版效果-webkit-mask
会用PS的童鞋一定知道"蒙版"的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效 ...
- html图片蒙版效果代码,浅谈图片蒙版效果-webkit-mask_html/css_WEB-ITnose
会用PS的童鞋一定知道"蒙版"的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效 ...
- html5交互效果,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- Android项目实战（二十）：浅谈ListView悬浮头部展现效果
Android项目实战(二十):浅谈ListView悬浮头部展现效果 原文:Android项目实战(二十):浅谈ListView悬浮头部展现效果 先看下效果:需求是 滑动列表 ,其中一部分视图(粉丝数 ...
- 2021上海燕窝、滋补品展浅谈中医对燕窝的研究：这6种情况吃燕窝，效果显著
2021上海燕窝.滋补品展浅谈中医对燕窝的研究:这6种情况吃燕窝,效果显著 2021世界燕窝展|上海滋补品展浅谈中医对燕窝的研究:这6种情况吃燕窝,效果显著~ 燕窝素有"东方珍品,稀世名药& ...
- html4与html5效果,浅谈HTML5与HTML4的10个关键区别
HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站.如果你同时使用HTML4和HTML5的话,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多.虽然H ...
- opencv运动目标跟踪预测_浅谈多目标跟踪中的相机运动
©PaperWeekly 原创 · 作者|黄飘 学校|华中科技大学硕士生 研究方向|多目标跟踪 之前的文章中我介绍了 Kalman 滤波器,这个算法被广泛用于多目标跟踪任务中的行人运动模型.然而实际场 ...
- 浅谈多目标跟踪中的相机运动
©PaperWeekly 原创 · 作者|黄飘 学校|华中科技大学硕士生 研究方向|多目标跟踪 之前的文章中我介绍了 Kalman 滤波器,这个算法被广泛用于多目标跟踪任务中的行人运动模型.然而实际场 ...
- 飞机qar数据可视化_浅谈QAR大数据分析与应用
QAR数据分析指的是用适当的统计分析方法对收集来的QAR数据进行分析,提取有用信息和形成结论而对QAR数据加以详细研究和概括总结的过程.目前航空公司在QAR数据分析与应用上主要有两类问题. 一是典型超 ...
最新文章
- python异常处理--try except else raise finally
- XCODE 所有DeviceSupport
- 轻松构建微服务之分布式锁
- django 与 百度 ueditor 富文本编辑器集成
- 跟着鸟哥学Linux系列笔记1
- web框架django初探
- Android Framework 全面分析 BootAnimation
- Cockos REAPER 6 for Mac - 强大的数字音频工作站
- redhat最小化安装是多少包_Linux的最小化安装
- jquery初级视频教程
- PHP生成二维码与识别二维码
- java导出word特殊符号,Word2019中输入特殊符号的方法
- 不恢复余数除法原理_小学数学基础概念大全，家长收藏起来，一条一条讲给孩子听。能全背下来的，考试也不带怕的了！...
- 高考是不是计算机投档,1:1高考投档是什么意思 填报志愿注意事项
- c语言编写方波信号的思路,频率可调的方波信号发生器设计及电路
- 佳能（数码相机）SDK使用记录
- torch.atan2函数详细解答
- 26Play框架教程2学习笔记
- 【无人驾驶】“自主代客泊车”/自动泊车方案调研 2
- 数据库系统概论（第十章： 数据库恢复技术）