backface-visibility

Examples

In this example, we’re going to create a card flip example using the backface-visibility property. The markup consists of a container that contains two elements that we’re going to stack on top of each other, back-to-back. We’re going to apply the backface-visibility property to these two elements, and then when the container is hovered, the two elements are going to be rotated in three-dimensional space, thus showing the “other side of the card”. In the live demo below, you can see this example live.

<div class="container">
    <div class="card">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>
                

The CSS with comments explaining each step is the following:

.container {
    /* general styles here... */
    /* activate 3D space */
    perspective: 800px;
}

.card {
    /* general styles here... */
    position: relative;
    transition: all .4s linear;
    /* allow child elements to be positioned in 3D space of their own */
    transform-style: preserve-3d;
}

.face {
    /* general styles go here... */
   /* position faces absolutely so that they stack on top of each other */
    position: absolute;
    width: 100%;
    height: 100%;
    
    /* prevent the front face from showing through the back */
    backface-visibility: hidden;
}

.back {
    /* ... */
    /* initially rotate the element in the back so that when the card is flipped, it faces the viewer */
    transform: rotateY(180deg);
}

/* when the card is hovered, rotate it. This will allow the back face to face the viewer. */
.card:hover {
    transform: rotateY(180deg);
}
                

Check out the live demo in the next section.