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

列印頁面