CSS 3d属性：backface-visibility
<p>MDN 文档对 backface-visibility 的描述中使用了一句相对抽象的解释，“元素的背面是其正面的镜像”，可以理解为元素正面即朝着我们的那一面的内容会被元素的背面当作镜像使用。该属性缺省时值为 visible，元素正面镜像会投射到其背面，我们看到的效果如同我们看到镜子中的自己一般；另一个值是 hidden，背景不显示正面的镜像，另外还有继承（inherit）和重置（unset）两个可选值。<p>在2d场景，当元素以二维的方式渲染，我们无法看到元素的背面，backface-visibility 属性无效，仅当我们在2d场景渲染3d效果时，特别地，元素要做3d动画之时，该属性才会派上用途。</p>
<p>考虑一下以下的三层HTML代码结构：</p>
<div id="hEdiv1"><pre id="hEpre1">
<div id="父">
<div id="子">
<img class="孙" src="图片1" ... />
<img class="孙" src="图片2" ... />
<img class="孙" src="图片3" ... />
<img class="孙" src="图片4" ... />
<img class="孙" src="图片5" ... />
<img class="孙" src="图片6" ... />
</div>
</div>
</pre></div>
<p>父亲提供一个大的2d舞台，如果孙辈们要渲染3d变换效果，父亲（这里指孙子们的父亲的父亲）需要提供一个虚拟的透视场景即景深（perspective： 1000px;），其儿子即孙子们的父亲则需要为父亲的孙子们设置3d渲染样式（transform-style: preserve-3d;），孙辈演绎3d变换效果时则可选是否将自己正面的内容投射到背部（backface-visibility: visible | hidden;）。对应的CSS设置如下：</p>
<div id="hEdiv2"><pre id="hEpre2">
#父 {
/* ... 这里是其它属性 */
perspective: 1000px;
}
#子 {
/* ... 这里是其它属性，比如宽高等 */
transform-style: preserve-3d;
}
.孙 {
/* ... 这里是其它属性，比如宽高、静态的3d变换 */
backface-visibility: visible;
/* 或 backface-visibility: hidden; */
}
</pre></div>
<p>这样，当儿子设置了 animation 属性跳钢管舞（延Y轴旋转），孙子们会随父亲旋转，做3d变换时如果其背面以我们可以见到的角度呈现时，backface-visibility 属性的设置效果就出来了：孙辈正面的内容或以左右反向出现在背部，或不在背部显示其正面的镜像。</p>
<p>ps：若不做 animation 动画，上述结构可以去除中间环节（#子），将 transform-style: preserve-3d; 属性设置直接给 #父 便可。</p>
<p>演示地址：<a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=1739765660" target="_blank">Minimal bass</a></p>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv1, hEpre1);
hlight.hl(hEdiv2, hEpre2);
</script> 既然backface-visibility缺省时值为 visible，为什么在孙辈还要设置一下backface-visibility: visible;呢？ 去看了一下黑黑网站里的旋转图，原来之前这个功能就被使用过呢，这次是提出来单独讲述，这样单独讲述的好，更清楚了{:4_199:} 红影 发表于 2025-2-17 12:56
既然backface-visibility缺省时值为 visible，为什么在孙辈还要设置一下backface-visibility: visible;呢？
不设置也行呀，设置是为了区分设置和不设置，或方便修改属性值 红影 发表于 2025-2-17 12:57
去看了一下黑黑网站里的旋转图，原来之前这个功能就被使用过呢，这次是提出来单独讲述，这样单独讲述的好， ...
知识要酱紫消化：先囫囵吞枣，再一个一个反刍{:4_170:} 谢谢老师辛苦，学习了！ 梦江南 发表于 2025-2-17 15:35
谢谢老师辛苦，学习了！
{:4_190:} 马黑黑 发表于 2025-2-17 12:58
不设置也行呀，设置是为了区分设置和不设置，或方便修改属性值
原来是这样，嗯嗯，明白了{:4_187:} 马黑黑 发表于 2025-2-17 13:00
知识要酱紫消化：先囫囵吞枣，再一个一个反刍
我连吞枣还没全吞完，来不及反刍啊{:4_189:} 红影 发表于 2025-2-17 19:19
我连吞枣还没全吞完，来不及反刍啊
{:4_172:} 红影 发表于 2025-2-17 19:18
原来是这样，嗯嗯，明白了
{:4_191:} 辛苦了！谢谢马老师深入浅出的讲解{:4_191:} 杨帆 发表于 2025-2-17 20:11
辛苦了！谢谢马老师深入浅出的讲解
感谢！晚上好 开发一种新效果，高级，点个大赞。。{:4_173:} 马黑黑 发表于 2025-2-17 19:37
等我先囫囵吞枣{:4_173:} 马黑黑 发表于 2025-2-17 19:37
嗯嗯，写出来的比较明确了。 红影 发表于 2025-2-17 21:18
嗯嗯，写出来的比较明确了。
{:4_190:} 红影 发表于 2025-2-17 21:18
等我先囫囵吞枣
张嘴就行 花飞飞 发表于 2025-2-17 20:49
开发一种新效果，高级，点个大赞。。
这个不算新吧？类似的效果过去做了好几个的 马黑黑 发表于 2025-2-17 21:35
谢大咖{:4_187:}
页:
[1]
2