3D Door Opening Effect with CSS: Step-by-Step Tutorial

View example Download

In this experiment, we will explore how to use multiple layers (divs) and powerful 3D CSS transformations to emulate the realism of an opening door. Although this tutorial was originally born in 2014, the concepts of perspective and Y-axis rotation remain fundamental for creating modern interactive interfaces without relying on JavaScript.

By leveraging the :hover selector and smooth transitions, we will achieve an immersive effect that reveals hidden content behind our "virtual door."

Building our door (HTML5 Structure)

For the 3D effect to work correctly, we need a hierarchy of containers that define the three-dimensional space. We will use descriptive class names to keep the code clean and professional.

<!-- Main container: defines the stage and perspective -->
<section class="escenario">
    <div class="marco-puerta">
        <!-- Content behind the door -->
        <div class="contenido-oculto">
            <img src="batman-gangnam-style.gif" alt="Surprise animation behind the door" />
        </div>
        <!-- The door object with its two faces -->
        <div class="puerta">
            <div class="cara adelante"></div>
            <div class="cara atras"></div>
        </div>
    </div>
</section>

It is crucial that the contenido-oculto, adelante, and atras elements share the same dimensions and absolute positioning so that the overlapping is perfect.

Creating the 3D effect (Modernized CSS)

The magic lies in the perspective property. Without it, the rotation would look flat (2D). By adding depth to the parent container, the browser calculates the visual deformation necessary to trick the human eye.

1. Setting up the stage

We define the background (the wall) and the vanishing point for our 3D animation:

.escenario {
    background: url('wall.jpg') repeat;
    perspective: 1000px; /* Higher value = smoother perspective */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

2. Animating the door

We use transform-style: preserve-3d so that the door's children also exist in 3D space, and transform-origin so the door rotates on its left hinge and not on its center.

.puerta {
    position: relative;
    width: 200px;
    height: 300px;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left; /* The door hinge */
    cursor: pointer;
}
.marco-puerta:hover .puerta {
    transform: rotateY(-130deg); /* Inward opening */
}

3. Managing the door faces

The backface-visibility: hidden property is vital: it prevents us from seeing the "back" of the front face when the door rotates, allowing the back face to be visible instead.

.cara {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background-size: cover;
}
.adelante {
    background-image: url('door-front.jpg');
    z-index: 2;
}
.atras {
    background-image: url('door-back.jpg');
    transform: rotateY(180deg); /* Flips the back face so it faces the other way */
}

Why use this effect in modern web design?

Beyond being a visual experiment, these types of interactive CSS techniques improve user engagement. Some practical applications include:

Gamification: Revealing rewards or "easter eggs" on landing pages.
Product Cards: Showing technical specifications when hovering over an image.
Portfolios: A creative way to present old versus new projects.

Accessibility Considerations (A11y)

Although the effect is triggered with :hover, it is good practice to allow users navigating with a keyboard to trigger it as well. You could add a small script to activate an .is-open class via the focus event on a wrapper button.

View example Download project