Coverflow Carousel — 3D Cards HTML CSS JS Snippet

Coverflow — the 3D carousel that fans cards out in perspective with the active one front-and-centre and its neighbours angled and receding — is one of the most visually impressive ways to browse a small set of items. Made famous by iTunes, it instantly communicates "there's more on either side". This snippet implements it in plain HTML, CSS, and vanilla JavaScript using only transforms, so it animates on the GPU and exports cleanly to every framework: cards rotate and scale by their distance from centre, with prev/next buttons, clickable cards, position dots, and arrow-key support.

One layout function, pure transforms

Every card's appearance is derived from a single number: its offset from the current index. layout loops the cards and, for each, computes off = i - current and builds one transform: translateX to fan it out, translateZ to push non-active cards back in space, rotateY to angle it like an album cover, and scale to shrink it slightly with distance. The active card (off === 0) sits flat, large, and forward. Because everything is a transform with a transition: transform, the rearrangement runs on the compositor — smooth, and it survives a Tailwind/React export intact (utility frameworks animate transforms, not layout).

Perspective and stacking

The track sets perspective: 1200px and transform-style: preserve-3d, which is what turns the per-card rotateY/translateZ into real 3D depth rather than flat skewing. layout also sets each card's z-index to 100 - distance so the active card stacks above its neighbours, and fades/disables cards more than two steps away (opacity: 0, pointer-events: none) so the wings don't pile up infinitely or capture clicks.

Click, buttons, dots, and keyboard

Four navigation paths all funnel into layout: clicking any visible card calls goTo (centring it), the prev/next buttons step the index with bounds checks, the auto-generated dots jump straight to a slide, and Left/Right arrow keys move through. A dimming overlay (::after) darkens every non-active card and clears on the active one, focusing attention on the centre.

Dynamic dots

The dots are built in JS from the card count, so the indicator always matches the number of slides — add or remove a card and the dots follow. The active dot widens into a pill for a clear position cue.

Because the whole thing is driven by current and layout, wiring it to real data (product images, album art) is just swapping the card contents. Pair this with a carousel for a flat slider, a scroll-snap gallery for swipe galleries, or a product card grid.