Every one runs live, with a step-by-step explanation and code you can edit and paste into your own project.
Three overlapping cards: the one you point at straightens and comes toward you while the others dim and lean away. Static strips catch the pointer, so nothing flickers.
Drag the top card left or right: it slides and turns, easing to a stop instead of leaving the canvas. Past a threshold it sinks away into the depth and rejoins at the back, and the cards behind move up. JS only writes numbers; CSS does every motion.
Three pricing cards standing in an arc: the outer two turn to face the centre, the featured one stands in front. The one you point at squares up and steps forward.
Four photos lying on a tilted table at different angles and heights. Point at one and it rises off the table, straightens and turns to face you, leaving its shadow behind.
JS gives each cover its offset from the active one; CSS calc() does the placement and easing.
A gallery on the four sides of a cube. JS keeps one ever-growing angle, so Prev, Next and the dots always turn the short way round and never unwind.
Hover, tap or focus to flip. The back face is hidden until it turns toward you.
Panels arranged on a circle. The radius comes from tan(): (width / 2) / tan(180° / count).
Four slides on the sides of a box. JS counts steps; CSS turns the box by 90° per step.
Click the deck: the top card flies off and returns at the back. JS only reassigns positions.
Cover and pages hinge on the spine, each opening to a slightly different angle.
Six tiles that lift and flip to show their back. Odd tiles turn sideways, even ones head over heels, from a single custom property holding the rotation.
Radio buttons open one section at a time: its panel swings down on its top edge like a flap while the headers below slide out of the way. No height is animated.
A greeting card standing half open. Point at it and the cover swings round on its spine, the card turns toward you and a heart pops up out of the fold: a floating layer whose two halves each ride on their own page.
Six photos on a board that leans toward your pointer, while the photo nearest to it lifts off the board and its neighbours rise a little less. JS only measures distances and writes numbers; CSS does all the motion.
Five real books on a shelf, each a box with a spine, two covers and a block of pages. Point at one and it slides out toward you and turns to show its front cover, while its slot on the shelf stays put as the hit target.
A stitched leather wallet with four cards peeking out of its slot. Hover or focus and they fan upward and out, each rotated and lifted by its index with one calc().
An event ticket with a perforated stub. Hover or focus and the stub tears along the line of holes and swings down and away, still hanging from the last hole at the bottom, its torn edge scalloped where the holes were.
A sealed violet envelope seen at an angle. Hover or focus and the flap swings open on its top edge to show the striped lining, then an invitation slides up out of the pocket, in front of the open flap and behind the pocket.
Six pastel sticky notes on a cork board, each a little askew. Hover or focus one and it peels off the board from its glued top edge: two hinges, one inside the other, curl the paper towards you while a shadow opens underneath, then it settles back flat.