好像没什么用的前端原理--css的perspective到底怎么回事。

perspective用于3d的构图，在很多人的解读中，这个perspective的意思为人的视角距离元素的位置，其实这是不够准确的，或者说，容易引起歧义的。甚至目前为止（2019年2月26日）在w3c官方的中文以及英文文档中，都没有一个准确清晰的解释。

很多人理解这个属性为用户与元素的距离，离的越远，元素看起来越大，离的越近，元素看起来越小，然而事实不是这样的。
**

这属性确实描述的是用户视角与元素的距离，但浏览器显示的却是物体在浏览器上显示的投影！

**
看起来上面的话不像人话，其实在元素没有设transform：translatez的属性时，按照大家的理解也没有什么问题，不过，一旦设了z轴的偏移，事情就奇怪了。

下面是屏幕正中间有个盒子，

        :root {
            height: 100%;
        }

        body {
            perspective: 800px;
            perspective-origin: center center;
            height: 100%;
        }

        div {
            position: absolute;
            width: 100px;
            height: 100px;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
            background-color: black;
            transform: translatez(-100px);

        }

以上代码描述了一个盒子，沿着z轴向屏幕后方偏移了100px。父级上设置了perspective的值为800px。

但如果再把perspective设成300px，这个盒子居然看起来更小了？？！！

这就是因为，我们看到的，是盒子在浏览器上的投影。

如果translatez是正数，则为下图

如图所示，perspective越小，则眼睛距离元素越近，那么投影在屏幕上的影子越大。大家想象一下。。

如果translatez是负数，perspective越小，眼睛同样距离元素越近，但是屏幕上的投影呢，相应的也会变小，如下图
这个时候，眼睛距离div越近，屏幕上的投影会越小。

以上就是perspective成像的原理，我估计懂些摄影的朋友应该一下子就明白了。

知道这个除了可以避免极个别情况下的一些bug，好像就没什么用了。不过学习不就是这种刨根问底的过程嘛～