1. 介绍
backface-visibility 是一个CSS属性，用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。
当我们对一个元素应用3D转换（例如旋转或倾斜）时，默认情况下，元素的背面是不可见的，即不会显示在屏幕上。这是因为浏览器默认会进行背面剪裁（backface culling），以提高性能和减少不必要的渲染。但有时候，我们可能需要让元素的背面可见，这时就可以使用 backface-visibility 属性来控制。
backface-visibility 属性有两个可能的值：
visible：表示元素的背面可见。背面将正常渲染并显示在屏幕上。hidden：表示元素的背面不可见。背面将被隐藏，不会显示在屏幕上（这是默认值）
2. 演示使用
这个是案例是中午刷抖音看到渡一老师的视频 看到的, 双面卡片案例, 同时也第一次认识到了backface-visibility 属性. 然后自己就练了一下手, 顺便分享给大家.
效果是这样的:
3. 实现思路
- 两个盒子重叠,
这里用的是相对定位 - 设置文字那个盒子一开始显示背面, 图片那个盒子正常显示(即正面).
- 当鼠标悬停在外层的盒子上面的时候, img进行翻转,显示背面. 文字盒子进行翻转,显示正面
- 最后设置img 和 文字盒子 元素 背面不可见 即:
backface-visibility : hidden
4. 兼容性
最后附上这个属性的兼容性:
兼容性还是很不错的
