自学前端第二十二天:perspective视觉

最新推荐文章于 2022-03-09 21:11:41 发布

AKA俄语人Лев

最新推荐文章于 2022-03-09 21:11:41 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端HTML+CSS基础文章标签： css html

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116249004

前端HTML+CSS基础专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了CSS中的perspective和translateZ属性，它们用于创建3D视图效果。perspective定义了观察者到元素的距离，影响元素在3D空间中的大小。translateZ用于移动元素在Z轴上的位置，从而改变其大小和近大远小的视觉效果。perspective-origin可调整观察者的位置，影响元素的透视效果。通过实例和解析，深入理解这两个属性如何协同工作，创建立体视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 的值越大离人眼越近，图片越大,因为把物体推向屏幕外了,看到的是投影了。