css记录：三维变化之backface-visibility

backface-visibility 是 CSS 3D 转换中的一个重要属性，它决定了元素的背面在旋转时是否可见。在 3D 空间中，一个对象有正面和背面之分，通常我们只能看到对象的正面。然而，当对象进行 3D 旋转时，背面可能会短暂地暴露给观察者。backface-visibility 属性允许我们控制这种情况。

语法

backface-visibility: visible | hidden;

• visible：默认值。表示元素的背面在旋转时是可见的。
• hidden：表示元素的背面在旋转时是不可见的。

深入解析

1. 背面与正面的概念：
   在 CSS 3D 转换中，每个元素都有一个正面（即我们通常看到的一面）和一个背面（即元素翻转后可见的一面）。默认情况下，背面是可见的，但大多数情况下，我们希望在元素翻转时隐藏背面，以保持视觉的连贯性和清晰性。

2. 应用场景：
   backface-visibility 属性常用于创建卡片翻转效果、3D 导航菜单、旋转的立方体等。在这些场景中，我们通常希望元素的背面在旋转时是不可见的，以避免内容重叠或混乱。

3. 如何使用：
   通常，backface-visibility 属性与 transform 属性一起使用，以实现元素的 3D 旋转。例如，要创建一个卡片翻转效果，你可以将 backface-visibility 设置为 hidden，并使用 transform: rotateY(180deg) 来实现旋转。

   .card {
     transition: transform 0.5s;
     transform-style: preserve-3d;
     position: relative;
     width: 200px;
     height: 300px;
   }
   
   .front, .back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden; /* 隐藏背面 */
   }
   
   .front {
     background: red;
   }
   
   .back {
     background: blue;
     transform: rotateY(180deg);
   }
   
   .card.flipped {
     transform: rotateY(180deg);
   }
   

   在上面的示例中，.front 和 .back 分别是卡片的正面和背面，都设置了 backface-visibility: hidden。当卡片翻转时（即添加了 .flipped 类），背面（原本因为 transform: rotateY(180deg) 而处于背面位置的 .back 元素）会隐藏起来，只显示正面的内容。

4. 注意事项：

   • backface-visibility 属性仅对 3D 转换的元素有效。如果元素没有应用 3D 转换（如 rotateX(), rotateY(), rotateZ(), translateZ() 等），则该属性将无效。
   • 该属性不会影响元素的布局或大小，只影响元素的视觉呈现。
   • 在某些旧版浏览器中，backface-visibility 可能不受支持或存在兼容性问题。

5. 兼容性：
   大多数现代浏览器都支持 backface-visibility 属性，但在一些旧版浏览器或特定设备上可能存在兼容性问题。因此，在使用该属性时，最好检查目标浏览器的兼容性情况。