Cards & galleries 7 CSS 3D effects

Cards & galleries

Flip card

Pure CSS

Hover, tap or focus to flip. The back face is hidden until it turns toward you.

Cards & galleries

Ring carousel

Pure CSS

Panels arranged on a circle. The radius is computed in Sass with math.tan().

Cards & galleries

Coverflow

CSS + JS

JS gives each cover its offset from the active one; CSS calc() does the placement and easing.

Cards & galleries

Box slideshow

CSS + JS

Four slides on the sides of a box. JS counts steps; CSS turns the box by 90° per step.

Cards & galleries

Card stack

CSS + JS

Click the deck: the top card flies off and returns at the back. JS only reassigns positions.

Cards & galleries

Card fan

Pure CSS

Five cards share one pivot below the hand and fan out by index.

Cards & galleries

Opening book

Pure CSS

Cover and pages hinge on the spine, each opening to a slightly different angle.