How to Configure Strict CSS View-Transition-Old and New Rotate Transformations in Google Chrome

Modern interactive web experiences often feature rotational state shifts, such as flippable product cards, directional view pivots, and dynamic interface switches. When executing rotational transitions using Chromium’s View Transition API, uncoordinated 2D or 3D rotations between outgoing and incoming pseudo-elements can introduce disorienting wobble or visible seam clipping. Configuring strict CSS rotation animations guarantees synchronised orientation changes across view updates.

Understanding Transform Origins in View Transitions

By default, ::view-transition-old and ::view-transition-new occupy identical bounding coordinates within the isolated view-transition layer. When applying transform: rotate(), declaring an explicit transform-origin is essential. Without a centralised transform origin, elements rotate around misaligned axes, breaking visual continuity.

Configuring Synchronised Rotation Pairs in CSS

To craft a seamless rotational card flip between view states, declare complementary rotation keyframes across the pseudo-element pair:

::view-transition-old(card-flip) {
  animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both rotateCardOut;
  transform-origin: center center;
  backface-visibility: hidden;
}

::view-transition-new(card-flip) {
  animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both rotateCardIn;
  transform-origin: center center;
  backface-visibility: hidden;
}

@keyframes rotateCardOut {
  from {
    transform: perspective(800px) rotateY(0deg);
    opacity: 1;
  }
  to {
    transform: perspective(800px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes rotateCardIn {
  from {
    transform: perspective(800px) rotateY(-90deg);
    opacity: 0;
  }
  to {
    transform: perspective(800px) rotateY(0deg);
    opacity: 1;
  }
}

Handling 3D Perspective and Depth Clipping

Because the root ::view-transition container operates with a 2D compositing context by default, apply perspective within the transform value itself rather than relying on parent inheritance. This ensures consistent perspective projection across high-DPI displays.

Verifying Hardware Compositor Performance

Open Chrome DevTools > Rendering and inspect Paint flashing. Verify that only the active view-transition layer renders during rotation, leaving the underlying DOM hierarchy completely static and flicker-free.