CSS - backface-visibility Property

Quiz

CSS backface-visibility property of CSS determines the visibility of the back face of an element when turned towards the user. Back face of an element is nothing but the mirror image of the front face of the element.

When an element is transformed and rotated in a three-dimensional space, the back face can be made visible.

Syntax

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

Property Values

Value	Description
visible	The back portion is visible.Default value.
hidden	The back portion is not visible.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Backface Visibility Property

Below are described some examples of the backface-visibility property with different values.

Visible Back

In order for the back portion of an element to be visible, the visible value is used. In the following example, the back face of the cube is visible.

Example

<!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>

Invisible Back

In order for the back portion of an element to be not visible, the hidden value is used. In the following example, the back face of the cube is not visible.

Example

<!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>

Supported Browsers

Property
backface-visibility	36.0	10.0	16.0	4.0	23.0

css_reference.htm

Print Page