3D Card Flip with View Transitions

A True 3D Flip in CSS

The trick is to apply perspective to the parent of the snapshot pseudo-elements, then rotateY the snapshot itself.

::view-transition-group(card) {
  perspective: 1000px;
}
@keyframes flip-out {
  to { transform: rotateY(90deg); opacity: 0; }
}
@keyframes flip-in {
  from { transform: rotateY(-90deg); opacity: 0; }
}
::view-transition-old(card) {
  animation: 300ms ease-in both flip-out;
}
::view-transition-new(card) {
  animation: 300ms 280ms ease-out both flip-in;
}

The 280ms delay

Notice the delay on the flip-in animation. Without it, both snapshots would rotate simultaneously and the user would see them stacked in 3D space, which looks broken. The delay creates the perceptual illusion that the card has actually rotated 180°.

::view-transition-group vs ::view-transition-old/new

The ::view-transition-group(card) pseudo-element is the container of both old and new snapshots. Setting perspective on the group ensures the rotateY transform on the inner snapshots is interpreted in true 3D space rather than as a 2D skew.

Backface visibility

The default behavior shows the back of the rotated card mid-animation. To hide it cleanly, add:

::view-transition-old(card),
::view-transition-new(card) {
  backface-visibility: hidden;
}

Use sparingly

3D flips are eye-catching but expensive — they prevent the browser from optimizing the snapshot as a 2D layer. Limit to one or two cards per transition, not entire grids.