CSS - backface-visibility 属性

CSS 的 backface-visibility 属性决定了元素在翻转朝向用户时背面的可见性。元素的背面只是元素正面的镜像。

当元素在三维空间中进行变换和旋转时，背面可以设置为可见。

语法

backface-visibility: visible | hidden | initial | inherit;

属性值

值	描述
visible	背面可见。默认值。
hidden	背面不可见。
initial	将属性设置为其初始值。
inherit	从父元素继承该属性。

CSS 背面可见性属性示例

下面描述了 backface-visibility 属性使用不同值的示例。

可见背面

为了使元素的背面可见，使用 visible 值。在下面的示例中，立方体的背面可见。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .show div {
            backface-visibility: visible;
        }

        .container {
            width: 150px;
            height: 150px;
            margin: 75px 0 0 75px;
            border: none;
        }

        .cube {
            width: 100%;
            height: 100%;
            perspective: 350px;
            perspective-origin: 120% 120%;
            transform-style: preserve-3d;
        }

        .face {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            line-height: 80px;
            font-size: 3.5em;
            color: white;
            text-align: center;
        }

        .front {
            background: rgba(178, 0, 178, 0.5);
            transform: translateZ(50px);
        }

        .back {
            background: rgba(178, 178, 0, 0.5);
            color: black;
            transform: rotateY(180deg) translateZ(50px);
        }

        .right {
            background: rgba(0, 0, 178, 0.5);
            transform: rotateY(90deg) translateZ(50px);
        }

        .left {
            background: rgba(178, 0, 0, 0.5);
            transform: rotateY(-90deg) translateZ(50px);
        }

        .top {
            background: rgba(0, 178, 0, 1);
            transform: rotateX(90deg) translateZ(50px);
        }

        .bottom {
            background: rgba(0, 0, 0, 0.2);
            transform: rotateX(-90deg) translateZ(50px);
        }
    </style>
</head>

<body>
    <h2>CSS backface-visibility property</h2>
    <p>
        The back faces (2, 4, 5) are visible through the front faces (1, 3, 6).
    </p>
    <div class="container">
        <div class="cube show">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
        </div>
    </div>
</body>

</html>

不可见背面

为了使元素的背面不可见，使用 hidden 值。在下面的示例中，立方体的背面不可见。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .hide div {
            backface-visibility: hidden;
        }

        .container {
            width: 150px;
            height: 150px;
            margin: 75px 0 0 75px;
            border: none;
        }

        .cube {
            width: 100%;
            height: 100%;
            perspective: 350px;
            perspective-origin: 120% 120%;
            transform-style: preserve-3d;
        }

        .face {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            line-height: 80px;
            font-size: 3.5em;
            color: white;
            text-align: center;
        }

        .front {
            background: rgba(178, 0, 178, 0.5);
            transform: translateZ(50px);
        }

        .back {
            background: rgba(178, 178, 0, 0.5);
            color: black;
            transform: rotateY(180deg) translateZ(50px);
        }

        .right {
            background: rgba(0, 0, 178, 0.5);
            transform: rotateY(90deg) translateZ(50px);
        }

        .left {
            background: rgba(178, 0, 0, 0.5);
            transform: rotateY(-90deg) translateZ(50px);
        }

        .top {
            background: rgba(0, 178, 0, 1);
            transform: rotateX(90deg) translateZ(50px);
        }

        .bottom {
            background: rgba(0, 0, 0, 0.2);
            transform: rotateX(-90deg) translateZ(50px);
        }
    </style>
</head>

<body>
    <h2>CSS backface-visibility property</h2>
    <p>Back faces (2, 4, 5) are hidden.</p>
    <div class="container">
        <div class="cube hide">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
        </div>
    </div>
</body>

</html>

支持的浏览器

属性
backface-visibility	36.0	10.0	16.0	4.0	23.0

css_properties_reference.htm

打印页面