css3中的perspective与perspective-origin

梦里梦外; 2022-06-18 00:50 219阅读 0赞

`perspective`属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.

CSS3 3D transform的**透视点是在浏览器的前方**！

或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！

比方说，一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的`perspective`大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680\*1.2≈2000)看到的真实效果一致！！

### translateZ帮你寻找透视位置 ###

如果说`rotateX`/`rotateY`/`rotateZ`可以帮助理解三维坐标，则`translateZ`则可以帮你理解透视位置。

我们都知道近大远小的道理，对于没有`rotateX`以及`rotateY`的元素，`translateZ`的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素`perspective`为201像素，如下：

perspective: 201px;

则其子元素，设置的`translateZ`值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；`translateZ`值越大，该元素也会越来越大，当`translateZ`值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当`translateZ`值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！

[链接1][1]

perspective 定义3d元素距离视图的距离。

perspective-origin:定义视图在x轴y轴的位置。

这两个属性一般都用于父元素。

[1]: http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3系列之详解perspective

perspective 简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕8

た入场券/ 2023年08月17日 15:23/ 0 赞/ 111 阅读

相关 CSS3的动画及3D转换（animation、transform、rotate3d 、perspective等）【总结】

目录 1. 动画 ① 创建 ② 属性 ③ 关键帧

浅浅的花香味﹌/ 2023年02月22日 05:11/ 0 赞/ 19 阅读

相关 OpenGL 3 中 VS/FS 的插值 (perspective correction) 限定符

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRh

た入场券/ 2022年11月25日 00:48/ 0 赞/ 163 阅读

相关 css3中的transition与animation中的delay问题

两者中都有delay属性，且在两者中，如在一个transition或animation中有俩个秒数，前一个代表duration ,或一个代表delay; 两者都要写dur

青旅半醒/ 2022年07月13日 03:12/ 0 赞/ 189 阅读

相关 CSS3中的transform-origin的用法以及与perspective、perspective-orgin的不同

transform-origin定义变换元素的基点，包括2d和3d转换。用在元素自身，其中top,left,bottom,right是指元素的宽度或高度的左右边缘， 0p

爱被打了一巴掌/ 2022年07月13日 02:52/ 0 赞/ 136 阅读

相关 css3中的perspective与perspective-origin

`perspective`属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.

梦里梦外;/ 2022年06月18日 00:50/ 0 赞/ 220 阅读

相关 css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

1. transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果注意：设置了该属性，就不能防止子级元素溢出，即不能设置over

妖狐艹你老母/ 2022年05月09日 03:30/ 0 赞/ 315 阅读

相关关于CSS透视perspective的第一次”见面“

关于CSS透视perspective的第一次”见面“ 今天在看教学视频，学到CSS中的透视属性，视觉上觉得非常舒服，跟着写了个小小的demo.记录一下学习。透视：per

电玩女神/ 2022年04月24日 10:58/ 0 赞/ 234 阅读

相关 CSS之透视perspective属性

透视原理：近大远小。浏览器透视：把近大远小的所有图像，透视在屏幕上。书写方式不同的定义 perspective有两种定义方式，如下 .clas

落日映苍穹つ/ 2022年01月05日 02:22/ 0 赞/ 487 阅读

相关 css3 perspective与translateZ变换

![在这里插入图片描述][20200520125450260.png] css3中的坐标系，`rotateX`就是绕着x轴旋转，`rotateY`就是绕着Y轴旋转，`rot

悠悠/ 2021年07月04日 13:10/ 0 赞/ 360 阅读