CSS Animation Example: 3D Card Flip

The "3D Card Flip" is a highly engaging interaction perfect for displaying secondary information, such as product details behind an image or a bio behind a profile picture.

Front View

Hover or click to flip

Back View

Hidden Details!

This effect relies on three core CSS properties working in harmony:

perspective: Applied to the outermost container, this defines the depth of the 3D space. Without it, the rotation looks completely flat.
transform-style: preserve-3d: Applied to the inner container that holds the front and back faces, allowing its children to exist in standard 3D space rather than being flattened.
backface-visibility: hidden: Applied to both the front and back face elements. The back face is pre-rotated 180deg. When the inner container rotates, the front face turns away (becoming invisible), and the back face rotates into view (becoming visible).

Here is the complete code to create the 3D Card Flip animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

/* The flip card container must have perspective */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px; /* Gives a 3D effect */
}

/* This container holds both the front and back, and is the element that actually rotates */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

/* Hovering on the outer container rotates the inner container */
.flip-card:hover .flip-card-inner,
.flip-card.hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Shared styles for both front and back faces */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Hides the back of the element when it's rotated away from the viewer */
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.flip-card-front {
    background-color: #fff;
    color: #333;
}

.flip-card-back {
    background-color: #007bff;
    color: white;
    /* The back face is initially rotated so it's "behind" the front face */
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        transition: none; /* Disable the smooth rotation for an instant flip */
    }
}
</style>

<div class="flip-card" tabindex="0" onfocus="this.classList.add('hover');" onblur="this.classList.remove('hover');">
    <div class="flip-card-inner">
        <div class="flip-card-front">
            <h2>Front Profile</h2>
            <p>Hover or focus to flip</p>
        </div>
        <div class="flip-card-back">
            <h2>Back Details</h2>
            <p>Hidden information!</p>
        </div>
    </div>
</div>

View Output

Accessibility Considerations

Large elements flipping in 3D space can induce dizziness or nausea for some users. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion. We can use it to completely bypass the smooth 3D flip animation, causing the card to simply snap instantly to its back face when hovered or focused.

Additionally, notice that we've added tabindex="0" to the outer container. Since a <div> isn't natively focusable via keyboard navigation, adding tabindex="0" allows users navigating with the "Tab" key to access and trigger the flip effect.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        /* Remove the transition duration, causing an instant state swap */
        transition: none; 
    }
}