perspective属性和perspective函数

马黑黑

一、perspective属性

perspective 作为CSS属性时用于一级即祖辈元素选择器，规范对应元素基于Z轴的透视特性，即，令该 祖辈元素具备3d景深功能；该属性需要设置了 transform-style: preserve-3d; 的次级元素即子级元素（可以是子辈或孙辈）元素作为3d渲染平台，为其下的元素做3d转换（3d transform）提供场景；二级元素下的三级子辈或孙辈元素通过 transform 3d 实现立体渲染。以下是伪代码结构：

<perspective>
    <transform-style>
        <transform 3d></transform 3d>
    </transform-style>
</perspective>

下例，body 选择器提供了 perspective 属性设置，body 标签在渲染场景中因此具备了透视功能；.pa 选择器设置了 transform-style 属性为 preserve-3d 为其下 class="son" 的子元素提供3d渲染场景；.son 选择器则设置了相应的 3d 转换：

<style> body { perspective: 600px; } .pa { width: 800px; height: 600px; border: 1px solid gray; transform-style: preserve-3d; margin: 100px auto 0; } .son { width: 300px; height: 200px; background: lightblue; transform: rotateX(45deg) rotateY(45deg); } </style> <div class="pa"> <div class="son"></div> </div>

二、perspective() 函数

perspective 作为CSS函数时写作 perspective(d)，参数 d 为距离相关值，直接作用于需要3d转换的元素。该函数用于 transform 属性值，必须放在所有属性值的最前面。

以下例子直接设置 class="son" 的元素做3d转换：

<style> .son { width: 300px; height: 200px; background: lightblue; transform: perspective(600px) rotateX(45deg) rotateY(45deg); margin: 100px auto; } </style> <div class="son"></div>

三、属性VS函数

perspective 属性在父辈元素中设置，本质是提供景深透视功能，实现代码结构上需要“第一层（perspective）+ 第二层（transform-style）+ 第三层（transform3d）”的层级关系维护，因此 perspective 属性可以视为为做3d转换的孙辈元素创建景深透视基础，而设置了 transform-style: preserve-3d; 的第二层元素则是为做3d转换孙辈元素搭建平台。

perspective() 函数仅需通过元素自身的设置就可以实现元素的3d转换，无需复杂层级关系维护，适用于单独设置元素的3d渲染场景或不方便维护多层级相关属性关系的应用场景。

玫瑰

精彩的分享。

耄耋人

谢谢老师分享！

霜染枫丹

马老师中午好！
当每个字都会读，所有的字连接在一起却不知所云的时候，就说明我是不用去深究其所以然的。