Card flip

The markup has been settled for over a decade: a container that owns the perspective, a card inside it that rotates, and two faces stacked in the same box. The card takes transform-style: preserve-3d, so its children keep their own places in the third dimension instead of being flattened into the card’s plane. Each face takes backface-visibility: hidden, so it stops being drawn the moment it turns away from the viewer. The back face is pre-rotated by 180 degrees, which means it is already facing the right way when the card arrives there. Turn the card 180 degrees and the two faces trade places, with no opacity involved anywhere.

Perspective is what separates a flip from a squash. With no perspective on the container the rotation is orthographic: the card narrows to a vertical line and widens again, and the eye reads it as a horizontal scaling rather than as an object turning. A value somewhere around 600 to 1000 pixels puts the viewer a plausible distance away; smaller numbers exaggerate the near edge and are what a deliberately toy-like flip uses. The other requirement is that both faces be exactly the same size, since a card whose two halves disagree appears to change shape halfway through its own turn.

The reason to spend the motion is the claim it makes. A flip says the back is the same object as the front: the details are on the card, not in a new panel that replaced it. That is a different claim from a dissolve or a crossfade, where one thing takes another thing’s place, and from a slide transition, where the new content arrives from somewhere else. If the back is genuinely a different object, a flip is a lie the reader will feel without being able to name.

Flips read as playful at card size and as disorienting at panel size, and the threshold is lower than most people expect: rotating a whole column of search results is closer to a page turning over than to a card being examined. Keep them to one object at a time, keep the duration in the 400 to 700 millisecond range where the turn is legible without being slow, and never fire one on hover across a grid, where a passing pointer sets off a wave of them. Because the move is usually scripted rather than a hover state, it also has to answer prefers-reduced-motion itself and simply arrive at the other face. One last piece of vocabulary hygiene: flip animation usually means something else entirely, the First Last Invert Play measuring technique, which involves no rotation at all.