Card Fan Spread Effect with CSS Transforms

Fanned Card Stack

A card fan effect displays multiple overlapping cards rotated at different angles from a shared origin point, creating a hand-of-cards visual.

The CSS

.card-stack {
  position: relative;
  width: 200px;
  height: 280px;
}

.card-stack .card {
  position: absolute;
  inset: 0;
  transform-origin: bottom center;
  transition: transform 0.3s ease;
}

.card:nth-child(1) { transform: rotateZ(-15deg); }
.card:nth-child(2) { transform: rotateZ(-5deg); }
.card:nth-child(3) { transform: rotateZ(5deg); }
.card:nth-child(4) { transform: rotateZ(15deg); }

Transform Origin Is Key

Setting transform-origin: bottom center makes all cards pivot from their bottom edge, creating a natural fan shape as if you are holding the cards. Other origins produce different fan styles:

• bottom left — Cards fan out to the right.
• center center — Cards rotate in place (no fan effect).
• top center — Inverted fan, cards spread at the bottom.

Hover Interaction

You can spread the fan further on hover:

.card-stack:hover .card:nth-child(1) { transform: rotateZ(-25deg); }
.card-stack:hover .card:nth-child(4) { transform: rotateZ(25deg); }

Adding Translate for Depth

Combining rotation with slight translate offsets enhances the layered feel:

.card:nth-child(1) {
  transform: rotateZ(-15deg) translateX(-10px);
}