CSS 3d属性：backface-visibility

马黑黑 · 发表于 2025-2-17 12:17

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

MDN 文档对 backface-visibility 的描述中使用了一句相对抽象的解释，“元素的背面是其正面的镜像”，可以理解为元素正面即朝着我们的那一面的内容会被元素的背面当作镜像使用。该属性缺省时值为 visible，元素正面镜像会投射到其背面，我们看到的效果如同我们看到镜子中的自己一般；另一个值是 hidden，背景不显示正面的镜像，另外还有继承（inherit）和重置（unset）两个可选值。

在2d场景，当元素以二维的方式渲染，我们无法看到元素的背面，backface-visibility 属性无效，仅当我们在2d场景渲染3d效果时，特别地，元素要做3d动画之时，该属性才会派上用途。

考虑一下以下的三层HTML代码结构：

<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>

父亲提供一个大的2d舞台，如果孙辈们要渲染3d变换效果，父亲（这里指孙子们的父亲的父亲）需要提供一个虚拟的透视场景即景深（perspective： 1000px;），其儿子即孙子们的父亲则需要为父亲的孙子们设置3d渲染样式（transform-style: preserve-3d;），孙辈演绎3d变换效果时则可选是否将自己正面的内容投射到背部（backface-visibility: visible | hidden;）。对应的CSS设置如下：

#父 {
	/* ... 这里是其它属性 */
	perspective: 1000px;
}

#子 {
	/* ... 这里是其它属性，比如宽高等 */
	transform-style: preserve-3d;
}

.孙 {
	/* ... 这里是其它属性，比如宽高、静态的3d变换 */
	backface-visibility: visible;
	/* 或 backface-visibility: hidden; */
}

这样，当儿子设置了 animation 属性跳钢管舞（延Y轴旋转），孙子们会随父亲旋转，做3d变换时如果其背面以我们可以见到的角度呈现时，backface-visibility 属性的设置效果就出来了：孙辈正面的内容或以左右反向出现在背部，或不在背部显示其正面的镜像。

ps：若不做 animation 动画，上述结构可以去除中间环节（#子），将 transform-style: preserve-3d; 属性设置直接给 #父便可。

演示地址：Minimal bass