css3 perspective perspective-origin属性的理解

最新推荐文章于 2025-04-15 19:29:28 发布

转载最新推荐文章于 2025-04-15 19:29:28 发布 · 659 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/weizaiyes/p/6206732.html

本文深入讲解CSS中的perspective属性，探讨其如何影响3D变换效果的强度与视觉体验，包括不同实现方法及其对画布上多个变型体的影响。同时，解析perspective-origin属性的作用，帮助读者更好地掌握3D元素的定位与透视效果。

perspective字面意思是：透视。

在w3school中它的解释为:设置元素被查看位置的视图：通俗讲，就是我们看看一个物体的所处的视角，近大远小。就比如我们正对着电脑：当我无限贴近电脑屏幕的时候，电脑的屏幕就无限大；当我们站起来远离电脑的时候，电脑的屏幕就无限变小。

如果我们不要perspective这个属性的话，那么你看到的就不再是一个矩形的旋转，而是一个矩形逐渐变窄，然后逐渐变宽，因为他没有透视（perspective）。

perspective属性的值是一个数字，他有2种实现方法：

1. transform: perspective(800);

2. perspective: 800;

perspective可以写在画布（父元素）上，也可以直接写在元素本身上，对于一张画布只有一个变型体的时候，几乎没有差别。但是当一个画布上有多个变型体的时候，两种写法的差别立即就表现出来了。就像这张图，黄色的部分，perspective直接写在色块上，紫色的部分，perspective写在了父容器上，以画布作为透视元素，所以子元素的形态都是不一样的。

关于CSS3效果中，perspective <wbr>perspective-origin属性的理解

perspective的值，则是决定3D变形效果的强度的，这个值大致可以理解为远近。只越大，你离物体就越远。就像一个离你很远的正方体（比如魔方）在做旋转，他的视觉效果就比较弱，但是如果这个魔方在你的眼前旋转，那么效果就比较强烈。

关于perspective-origin，w3school是指设置元素被查看位置的视图：perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身，它是和perspective属性一起使用的，而且只影响 3D 转换元素。

转载于:https://www.cnblogs.com/weizaiyes/p/6206732.html