自学前端第二十二天:perspective视觉
CSS之perspective详解
语法(实际开发都是给perspective: 1000px;
perspective: number | none;
1.简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕800px 的地方观看这个元素。(这个属性，要设置在父元素上面)好了
2.最后补充一点，这个perspective 属性呢，要放在父级身上,然后还有一个属性perspective-origin，这个属性也是设置在父级身上。这个属性呢，默认值是 center center，也就是 居中。这两个参数呢，是根据自身来定位的， 0px 0px 代表着元素的左上角，center center代表着元素的中间点。可以设置像素 50px 也可设置百分比 50%，还可以设置 top right left bottom center 等。
3.perspective-origin这个属性有什么用呢？ 这个属性是相当于人 的眼睛看哪里。你没有设置，也就是默认看父元素 中间的地方。看下面两张图的例子，就知道什么意思啦。
4.perspective:中心人眼(人眼到物体的z轴距离,即给z轴长度) ,
必须设置在父级上,不设置perspective则看不出translateZ轴移动的近大远小的感觉
5.perspective-origin: 调整人眼视角,设置在父级上.
(默认50%,50% .第一个值X越大,眼睛越往右挪,第二个值Y越大,眼睛越往下挪,)
6. perspective VS translateZ:
外到内距离:perspective：800px 意思就是，我在正中心离屏幕800px 的地方观看这个元素,即不理解可以看成perspective是Z轴的长度单独.
内推外距离:translateZ:(你和电脑屏幕的这段距离即perspective上移动就是Z轴的移动, Z值移动越大, 代表图片越走近你的眼 , 就变越大,当translateZ值等于perspective值则代表图片内移动到了你的人眼皮底下了,重合就会看不见了)
7.总结: tz就看成你和左侧甲的距离,per就看成左侧甲和你的距离
①perspective透视就是人看物体的距离,translateZ就是物体自己挪向人眼的距离,
②两边都能移动的情况下,固定点就很重要了,要不p固定,Z去移动靠近p的值, 要不Z固定,P去移动靠近Z的值, (两者值靠近大,远小)
③总之两个属性要一起用开启,通常都是父perspective:1000px固定的, 然后子Z去调即可.自己细品
(这个perspective属性呢，有着很冷门的知识请认真看完呢)
先来看看， 加了perspective 和 没有加是什么区别， 第一个小方块，是有加的效果，能明显的看到空间感了有没有， 感觉他是真的像在旋转， 而第二个呢，像是在伸缩。
1.简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕800px 的地方观看这个元素。(这个属性，要设置在父元素上面)好了
因此下图看的视野就不同,第一张明显是站在远处看的,一览众三小,看得出是立体的
那么思考一个问题，transform：translateZ 呢，可以增加 Z轴的距离， 那么Z轴越大，是不是也就代表着，这个元素，离我们的距离越近？
(Z轴的translate的就是内外,即远近移动)
那么，你把一张图片，贴到你脸上，有什么效果？ 是不是非常大？有人可能会问，这两者之间有什么关系吗？ 肯定是有的，这个 perspective 配合 transform：translateZ 就有这种效果， 我们来看看。
(先记着，下图我们设置了perspective：800px，那么来看看 Z到800px 有什么效果)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AP86MMa1-1619633259307)(C:\Users\tuyue\AppData\Local\Temp\1613927504538.png)]
有没有发现，临近 800px 的时候， 图片突然变黑了， 然后到800px的时候， 图片消失了。 这又是为啥呢？ 其实很像我们现实中的例子一样，一张远处的图片，慢慢的移动到你脸上， 你会看见图片越来越大，贴到你脸上的时候，是不是 你就看不见了？ 到800px 的时候，你人都和图片 融合在一体了， 如果801px 是不是你都穿过这张图片了？道理是一样的啦。
那么transform：translateZ， 到负数的时候， 是不是值越小，图片离我们越远，同理的 图片也就越小。
但是！如果你真的认为 perspective 这个属性这么简单的话，那么你就太天真了。按照我们的思路继续，如果 perspective： 这个值，越小，是不是我们的人眼就离屏幕的距离越近， 那么 图片也会越大，(translateZ 是移动图片， perspective是移动 人 和屏幕的距离，这么想也是没问题的哈。
对吧，那么把translateZ(0px)。然后增加 perspective 试试看。 )
然后，你会惊奇的发现，咦？ 好像无论是增加，还是减少，图片都没有任何变化。
这个时候，先卖个关子，接着看下个案例，把 translateZ(-100px) 设置成 负值。
(正常，按照我们的想法，是不是 Z的值是正数，说明这个图片，离我们越近，那么反之，负值，离我们越远对吧) 那么这次我们不移动 translateZ 了， 设置好Z 值为-100px 之后，移动perspective的值，把他的值变小，(正常来说，值越小，是不是就代表 我们离屏幕越近， 看的东西也就越大对吧)
然后，你又会惊奇的发现， 怎么图片不是越来越大呢? 我们离屏幕越大，图片应该越大才对啊， 怎么变小了呢？
(上图中z设置为-100, 则perspective从800px到1px)
解惑为什么:
其实把。这里我们一直误导一个情况，固定死perspective1000px后,就固定人眼看屏幕的距离了.此时一旦我们启动tranlatez移动后即人眼perspective这边固定死距离了,轮到物体这边远近移动了),那么所看到的，就不是图片本身了(即只要开启tz就只是看到的是物体的投影,而不是真实图片)，而是已经是真实图片的投影了。因为你要想真实图片的宽高都没变,就是实际不会变化的,能变的只有视角,即看到的是投影,
第一种情况: z为正数时,把物体推向屏幕前了,看到的是后投影了, 即z越大则体大 (如图1)
第二种情况: z为负数时,把物体推向屏幕后了,看到的是前投影了,即z越小则体小(如图2)
第三种情况: z正数数时固定时, 则per人眼越大,则物体是越小的,(正常的,因为per就是人眼看屏幕的距离,per近则大和per远则小原则)
第四种情况: 但是z为负数时且固定时 , 则特殊了per人眼越大,则物体越大 ,
图1第一个情况，per一样,translateZ 的值越大离人眼越近，图片越大,因为把物体推向屏幕外了,看到的是投影了。
图2第二个情况，per一样 ,translateZ 的值为负数时,则z越小,投影也越小,看到的也越小
图3第三个情况，translateZ 为0的时候，为什么移动我们perspective人眼到屏幕 的值，图片的大小没有改变呢？
(因为translatez才是真正移动物体的属性, 不移动则没有投影,永远看到都是当前图片自身,)
图4第四个情况，最终解开谜题解释为什么translateZ 为负数之后，减少 perspective 的值后，图片不是变大， 反而变小呢？因为之前都是固定的 perspective 人眼距离,即z为负数的时候,则是
要注意的是, 在调整z轴的位置的时候 用户的视角也会跟着发生变化
为负数之后，减少 perspective 的值后，图片不是变大， 反而变小呢？因为之前都是固定的 perspective 人眼距离,即z为负数的时候,则是
[外链图片转存中…(img-rBkZB7TR-1619633259337)]
要注意的是, 在调整z轴的位置的时候 用户的视角也会跟着发生变化
自学前端第二十二天:perspective视觉相关推荐
- 自学前端第二十九天 CSS高级之细节技巧
第二十九天 css高级细节技巧 一.background-color :属性设置元素的背景颜色. 定义和用法 background-color 属性设置元素的背景颜色. 元素背景的范围 backgro ...
- 自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的 出现一个白色框即字体失效的检查: ①路径那里是不是fonts文件夹的第一子路径就是全部的文件. ②/+unicode编码 和 转义编码 有没有弄棍 (一个给c ...
- 自学Python第二十二天- Django框架(一)创建项目、APP、快速上手、请求和响应流程、模板、数据库操作
Django 框架是一个基于 python 的重量级的 web 开发框架,现今很多大公司大项目都是使用 Django 框架.采用了 MVC(model view controller) 的框架模式,p ...
- python 优先级继承_孤荷凌寒自学python第二十二天python类的继承
(完整学习过程屏幕记录视频地址在文末,手写笔记在文末) python中定义的类可以继承自其它类,所谓继承的概念,我的理解 是,就是一个类B继承自类A,意味着类B的内部代码块中就算不写任何代码,类B仍然 ...
- 自学前端第二十六天:flex弹性盒子
CSS3 弹性布局 flex(给父盒子挂flex帅,让子元素排布练阵) 1.摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局 ...
- 自学Python第二十二天- Django框架(三) AJAX、文件上传、POST 请求类型之间的转换、多APP开发、iframe、验证码、分页器、类视图、中间件、信号、日志、缓存、celery异步
Django官方文档 django 使用 AJAX django 项目中也可以使用 ajax 技术 前端 前端和其他 web 框架一样,需要注意的是,django 接收 POST 请求时,需要 csr ...
- 自学前端第二十四天:Animation动画栈帧效果
CSS3 帧动画 amimation @keyframes amimation 是transition过渡的高级升级版 1.为什么要 amimation 一帧一帧的具体动画,因为transition进 ...
- 自学js第十二天:DOM概念和基础操作
Web API 总结1: dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对 ...
- 如何系统地自学前端（女生），女生发展前端是否是青春饭?
看问题描述,题主应该对互联网开发了解的不多,题主问的就是两方面: 1.女生如何自学前端? 2.女生如果从事前端开发这个工作能不能长远的发展? 最初我入行的时候也有这样的担忧,很正常. 网上大力鼓吹兴趣 ...
最新文章
- 在北京做Java开发如何月薪达到两万，需要技术水平达到什么程度？
- No module named ‘win32gui’ 以及 No module named ‘win32console’解决办法
- 圣剑神域单机版服务器维护,圣剑神域单机版
- Spark推荐系列之Word2vec算法介绍、实现和应用说明（附代码）
- 2018专转本计算机百度云资源,2018年江苏专转本计算机真题版
- java同步异步的区别
- from PyQt4 import QtGui,QtCore出错
- 联想y7000 Linux显卡驱动,联想Y7000安装ubuntu1804.6双系统和显卡驱动(一)
- 区块链技术之P2P网络（一）
- unity游戏开发毕设_请问自学Unity开发出一款游戏作为毕设大概要多久？
- 程序员中的明星，超模or女团都是程序媛
- linux 之pvs磁盘报错
- Mac技巧 — QuickTime Player 设置播放速度
- Android APP启动其他APP（一个APP拉起（跳转到）另一个APP）
- 区块链核心概念（1）
- 什么样人适合学平面设计？零门槛入门工具收藏
- python输出hello的字符串字数_python 字符串
- 电脑突然经常死机？（ubuntu系统如何检查原因）
- 万字长文，细说长沙银行的数字化研发管理转型之路
- 一种基于智能卡登录Windows系统的实现方式