perspective属性和perspective函数
<style>.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
.artBox p { margin: 10px 0; }
</style>
<div class="artBox">
<h2>一、perspective属性</h2>
<blockquote>perspective 作为<txt-red>CSS属性</txt-red>时用于<txt-red>一级</txt-red>即祖辈元素选择器，规范对应元素基于Z轴的透视特性，即，令该 祖辈元素具备3d景深功能；该属性需要设置了 <mark>transform-style: preserve-3d;</mark> 的<txt-red>次级</txt-red>元素即子级元素（可以是子辈或孙辈）元素作为3d渲染平台，为其下的元素做3d转换（3d transform）提供场景；二级元素下的<txt-red>三级</txt-red>子辈或孙辈元素通过 transform 3d 实现立体渲染。以下是伪代码结构：<br><br><perspective><br> <transform-style><br> <transform 3d></transform 3d></br> </transform-style></br></perspective></blockquote>
<p>下例，body 选择器提供了 perspective 属性设置，body 标签在渲染场景中因此具备了透视功能；.pa 选择器设置了 transform-style 属性为 preserve-3d 为其下 <mark>class="son"</mark> 的子元素提供3d渲染场景；.son 选择器则设置了相应的 3d 转换：</p>
<div class="codebox" data-prev="1">
<style>
body {
<txt-pink>perspective: 600px;</txt-pink>
}
.pa {
width: 800px;
height: 600px;
border: 1px solid gray;
<txt-pink>transform-style: preserve-3d;</txt-pink>
margin: 100px auto 0;
}
.son {
width: 300px;
height: 200px;
background: lightblue;
<txt-pink>transform: rotateX(45deg) rotateY(45deg);</txt-pink>
}
</style>
<div class="pa">
<div class="son"></div>
</div>
</div>
<h2>二、perspective() 函数</h2>
<blockquote>perspective 作为CSS<txt-red>函数时</txt-red>写作 <mark>perspective(d)</mark>，参数 d 为距离相关值，直接作用于需要3d转换的元素。该函数用于 transform 属性值，<txt-red>必须放在所有属性值的最前面</txt-red>。</blockquote>
<p>以下例子直接设置 <mark>class="son"</mark> 的元素做3d转换：</p>
<div class="codebox" data-prev="1">
<style>
.son {
width: 300px;
height: 200px;
background: lightblue;
<txt-pink>transform: perspective(600px) rotateX(45deg) rotateY(45deg);</txt-pink>
margin: 100px auto;
}
</style>
<div <txt-blue>class="son"</txt-blue>></div>
</div>
<h2>三、属性VS函数</h2>
<p><txt-red>perspective 属性</txt-red>在父辈元素中设置，本质是提供景深透视功能，实现代码结构上需要“第一层（perspective）+ 第二层（transform-style）+ 第三层（transform3d）”的层级关系维护，因此 perspective 属性可以视为为做3d转换的孙辈元素创建景深透视基础，而设置了 <mark>transform-style: preserve-3d;</mark> 的第二层元素则是为做3d转换孙辈元素搭建平台。</txt-red></p>
<p><txt-red>perspective() 函数</txt-red>仅需通过元素自身的设置就可以实现元素的3d转换，无需复杂层级关系维护，适用于单独设置元素的3d渲染场景或不方便维护多层级相关属性关系的应用场景。</p>
</div>
<script>
function loadLineNumFile() {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
script.defer = true;
script.onload = () => addLineNumber();
document.head.appendChild(script);
}
loadLineNumFile();
</script> 精彩的分享。 谢谢老师分享！ 马老师中午好！
当每个字都会读，所有的字连接在一起却不知所云的时候，就说明我是不用去深究其所以然的。{:4_173:}{:4_204:}{:4_190:}
还是perspective() 函数更方便，直接就在自身上实现了，比起那么多层级的更容易理解。
谢谢黑黑的耐心讲解，学习了{:4_187:} 谢谢马老师的直观对比讲解，有利于进一步理解perspective属性和perspective函数{:4_190:}
页:
[1]