demo · v140

Three Deep

A three-level nested transition. With view-transition-group: contain, the inner snapshots stay inside their parent's pseudo subtree — so the rotated, coloured outer wrapper continues to clip and rotate the middle and inner snapshots during the animation.

inner
.outer  { view-transition-name: outer;  view-transition-group: contain; }
.middle { view-transition-name: middle; view-transition-group: contain; }
.inner  { view-transition-name: inner;  /* contained by .middle */     }

document.startViewTransition(() => {
  outer.classList.toggle("alt");
  middle.classList.toggle("alt");
  inner.classList.toggle("alt");
});

see also