了解 css中 backface-visibility 属性

1. 介绍

backface-visibility 是一个CSS属性，用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。

当我们对一个元素应用3D转换（例如旋转或倾斜）时，默认情况下，元素的背面是不可见的，即不会显示在屏幕上。这是因为浏览器默认会进行背面剪裁（backface culling），以提高性能和减少不必要的渲染。但有时候，我们可能需要让元素的背面可见，这时就可以使用 backface-visibility 属性来控制。

backface-visibility 属性有两个可能的值：

• visible：表示元素的背面可见。背面将正常渲染并显示在屏幕上。
• hidden：表示元素的背面不可见。背面将被隐藏，不会显示在屏幕上（这是默认值）

2. 演示使用

这个是案例是中午刷抖音看到渡一老师的视频 看到的, 双面卡片案例, 同时也第一次认识到了backface-visibility 属性. 然后自己就练了一下手, 顺便分享给大家.

效果是这样的:

jcode

3. 实现思路

• 两个盒子重叠,这里用的是相对定位
• 设置文字那个盒子一开始显示背面, 图片那个盒子正常显示(即正面).
• 当鼠标悬停在外层的盒子上面的时候, img进行翻转,显示背面. 文字盒子进行翻转,显示正面
• 最后设置img 和 文字盒子 元素 背面不可见 即:backface-visibility : hidden

4. 兼容性

最后附上这个属性的兼容性:

兼容性还是很不错的