css3 perspective perspective-origin属性的理解

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 转换元素。