了解 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

代码:

html

    <div class="main">

        <div class="card">
            <img src="https://gd-hbimg.huaban.com/2d32cac77850cae23aec172c71c93f8411afbeec7723c-RCvaHn_fw658webp" alt="">
            <div class="text_box">
                哈哈哈
            </div>
        </div>

    </div>

css

        .main {
   
   
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            background-color: #2d2d2d;
        }

        /*  */

        .card {
   
   
            position: relative;
            /* width: 400px; */
            height: 200px;
            border-radius: 12px;
            /* display: flex; */
        }

        img {
   
   
            width: 200px;
            height: auto;
            transition: .5s linear;
            perspective: 500px;
            z-index: 2;
            border-radius: 12px;
        }

        .text_box {
   
   
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            z-index: 1;
            text-align: center;
            line-height: 200px;
            font-size: 22px;
            font-weight: 600;
            background-color: #fff;
            /* 一开始展示反面 */
            transform: rotateY(180deg);
            border-radius: 12px;
            transition: .6s linear;
            perspective: 400px;
        }

        /*  鼠标划入 展示反面 */
        .card:hover img {
   
   
            transform: rotateY(-180deg);
        }   

        /* 鼠标划入 展示正面 */

        .card:hover .text_box {
   
   
            transform: rotateY(0deg);
        }


        /* 隐藏反面 */
        img,.text_box{
   
   
            backface-visibility: hidden;
        }

4. 兼容性

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

兼容性还是很不错的