文章介绍了CSS3的backface-visibility属性，用于控制3D空间中元素背面的可见性。当设置为hidden时，元素翻转后背面将不可见，有助于优化视觉效果和性能。文中提供了一个代码示例，展示了在不设置此属性时与设置后的不同效果。
一、使用CSS3 3D翻转2面盒子，始终不显示底部的盒子，最后查询得知是需要加上backface-visibility属性
Backface-visibility是一个CSS属性，用于指定元素背面的可见性。
当一个元素在3D空间中旋转或倾斜时，它的背面有时会显示出来。默认情况下，背面是可见的，即使它在视觉上被其他元素遮挡了。
通过使用backface-visibility属性，可以控制元素背面的可见性。该属性有两个可能的值：
visible: 默认值，元素的背面是可见的。
hidden: 元素的背面是隐藏的，即不可见的。这意味着无论元素是如何旋转或倾斜的，背面都不会显示出来。
使用backface-visibility属性可以在一些场景下非常有用，例如在创建3D动画时，当元素背面不需要显示时，可以将其设置为hidden以提高性能和视觉效果。
需要注意的是，backface-visibility属性只适用于进行3D变换的元素，如使用CSS的transform属性进行旋转、倾斜等操作的元素。对于未应用任何3D变换的元素，backface-visibility属性不会产生任何效果。
二、简单理解就是：用于定义当元素不面向屏幕时是否可见的
二、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all 1s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotate3d(0,1,0,180deg);
}
.front,
.back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
}
.back {
background-color: coral;
transform: rotateY(180deg);
/*重点是下面这句*/
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="front">轻轻的我走了</div>
<div class="back">正如我轻轻的来</div>
</div>
</body>
</html>三、当如何不在.back 下面加backface-visibility: hidden时，可以看看是什么效果
四、加了后的默认显示
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
