admin 管理员组

文章数量: 1184232

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

很多人理解这个属性为用户与元素的距离，离的越远，元素看起来越大，离的越近，元素看起来越小，然而事实不是这样的。
其实在元素没有设transform：translatez的属性时，按照大家的理解也没有什么问题，不过，一旦设了z轴的偏移，就不能这么理解了。

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

        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

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