admin 管理员组

文章数量: 1184232
perspective字面意思是：透视。 在w3school中它的解释为:设置元素被查看位置的视图：通俗讲，就是我们看看一个物体的所处的视角，近大远小。就比如我们正对着电脑：当我无限贴近电脑屏幕的时候，电脑的屏幕就无限大；当我们站起来远离电脑的时候，电脑的屏幕就无限变小。 如果我们不要perspective这个属性的话，那么你看到的就不再是一个矩形的旋转，而是一个矩形逐渐变窄，然后逐渐变宽，因为他没有透视（perspective）。 perspective属性的值是一个数字，他有2种实现方法：

1. transform: perspective(800);

2. perspective: 800;   perspective可以写在画布（父元素）上，也可以直接写在元素本身上，对于一张画布只有一个变型体的时候，几乎没有差别。但是当一个画布上 有多个变型体的时候，两种写法的差别立即就表现出来了。就像这张图，黄色的部分，perspective直接写在色块上，紫色的部 分，perspective写在了父容器上，以画布作为透视元素，所以子元素的形态都是不一样的。     perspective的值，则是决定3D变形效果的强度的，这个值大致可以理解为远近。只越大，你离物体就越远。就像一个离你很远的正方体（比如魔方）在做旋转，他的视觉效果就比较弱，但是如果这个魔方在你的眼前旋转，那么效果就比较强烈。   关于perspective-origin，w3school是指设置元素被查看位置的视图：perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身，它是和perspective属性一起使用的，而且只影响 3D 转换元素。

转载于:https://wwwblogs/weizaiyes/p/6206732.html

本文标签： 属性 perspective Origin

版权声明：本文标题：css3 perspective perspective-origin属性的理解 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1758699120a3089364.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。