HTML | DOM 样式 backfaceVisibility 属性(1)

📌 相关文章

📜 HTML | DOM 样式 backfaceVisibility 属性(1)

📅 最后修改于: 2023-12-03 15:01:12.682000 🧑 作者: Mango

HTML | DOM 样式 backfaceVisibility 属性

介绍

backfaceVisibility 是 CSS3 中的属性，用于指定元素的背面是否可见。在进行 3D 转换时，不可见的背面通常不应该显示。该属性只适用于使用 CSS3 转换的元素。

该属性是用于控制背面可见性的简便方法。如果您需要对背面进行更复杂的控制，则应该使用透明度和 transform 属性来控制背面的显示。

语法

backface-visibility: visible|hidden|initial|inherit;

值

visible：背面可见。如果正面和背面都绘制，那么背面将显示，就像反面一样。
hidden：背面不可见。如果正面和背面都绘制，那么背面将隐藏，就像看不到还是不存在一样。
initial：将此属性设置为其默认值。backface-visibility: visible;
inherit：从父元素继承 backface-visibility 属性设置。

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>backface-visibility 属性示例</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: pink;
			transition: transform .5s ease-in-out;
		}
		.box:hover {
			transform: rotateY(180deg);
			backface-visibility: hidden;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

效果：

当鼠标移动到盒子上时，盒子会绕 Y 轴旋转 180 度。同时，由于设置了 backface-visibility: hidden;，盒子的背面不会显示出来，可以达到更好的视觉效果。

总结

掌握 backfaceVisibility 属性可以让我们在进行 3D 转换时达到更好的视觉效果。它可以实现背面不可见的简便方法。同时，在实际开发中，可以配合其他的样式属性发挥更大的作用。