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

Complex affine transformations—combining translation, rotation, scaling, and skewing into a unified mathematical construct—allow web authors to orchestrate sophisticated spatial transitions across web pages. With Google Chrome’s native View Transition API, applying explicit matrix() or matrix3d() properties directly to ::view-transition-old and ::view-transition-new ensures high-performance GPU execution without DOM element re-renders.

Affine Matrix Mechanics in Chromium View Transitions

Chromium calculates transition coordinates relative to the snapshot canvas. When supplying a six-value 2D transformation matrix matrix(a, b, c, d, tx, ty) or a sixteen-value 3D matrix, defining a consistent transform-origin is critical to prevent perspective shifts between outgoing and incoming snapshots.

Authoring Strict Matrix Transition Keyframes

Configure complementary affine matrix transformations in your stylesheet:

::view-transition-old(matrix-zoom) {
  animation: 340ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both matrixOut;
  transform-origin: 50% 50%;
}

::view-transition-new(matrix-zoom) {
  animation: 340ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both matrixIn;
  transform-origin: 50% 50%;
}

@keyframes matrixOut {
  from {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
  to {
    transform: matrix(0.85, 0.15, -0.15, 0.85, -20, 10);
    opacity: 0;
  }
}

@keyframes matrixIn {
  from {
    transform: matrix(1.15, -0.15, 0.15, 1.15, 20, -10);
    opacity: 0;
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

Bounding and Compositor Verification

Ensure that the snapshot group layer does not clip rotated matrix bounds:

::view-transition-group(matrix-zoom) {
  overflow: visible;
}

Auditing in Chrome DevTools

Inspect the Animations drawer in Chrome DevTools to verify that the GPU compositor retains hardware acceleration without triggering software rasterisation fallback passes during complex matrix operations.