demo · v140
Clipped Card Flip
Pre-140 view transitions captured every named element to a flat sibling tree under the root — so an inner element animating beyond its parent's clip would visibly escape the card. Nested groups put the inner pseudo-elements inside their ancestor's pseudo, restoring clipping, masking, and 3D transform inheritance.
Back of card
The back content is positioned inside the card's clip. Nested groups mean it stays inside during the transition.
Click Flip. With nested groups (Chrome 140+) the badge and back face stay clipped to the card during the transition.
flat tree (pre-140)
Every named element is a direct child of ::view-transition. Inner animations ignore the parent's overflow: hidden, transforms, and filters.
nested tree (Chrome 140)
Pseudo-elements form a tree mirroring DOM ancestry. Inner transitions inherit clipping, masking, transforms, and opacity from the outer transition group.
.card { view-transition-name: card-shell; view-transition-group: nearest; }
.face { view-transition-name: card-face; view-transition-group: card-shell; }
.badge { view-transition-name: badge; view-transition-group: card-face; }