CSS Animation Stacked Card Fan 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;
}

.card-fan-container {
    position: relative;
    width: 250px;
    height: 350px;
    /* This allows the fan effect to overflow while keeping the hit area tight */
}

/* Base card styling */
.fan-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom center; /* Pivot from the bottom */
}

/* Adding unique background colors and starting rotations */
.fan-card.c1 {
    background-color: #ff6b6b;
    color: white;
    z-index: 1;
    transform: rotate(0deg);
}
.fan-card.c2 {
    background-color: #4ecdc4;
    color: white;
    z-index: 2;
    transform: rotate(3deg);
}
.fan-card.c3 {
    background-color: #ffe66d;
    color: #333;
    z-index: 3;
    transform: rotate(-3deg);
}

/* Spreading out on hover */
.card-fan-container:hover .fan-card.c1,
.card-fan-container:focus-within .fan-card.c1 {
    transform: rotate(-15deg) translateX(-30px);
}

.card-fan-container:hover .fan-card.c2,
.card-fan-container:focus-within .fan-card.c2 {
    transform: rotate(15deg) translateX(30px);
}

.card-fan-container:hover .fan-card.c3,
.card-fan-container:focus-within .fan-card.c3 {
    transform: translateY(-20px);
}

@media (prefers-reduced-motion: reduce) {
    .fan-card {
        transition: none; /* Instant snap */
    }
}
</style>