CSS Animation 3d Card Flip Example

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