Why Is not My 3D View Transition Working?

html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  └─ ::view-transition-image-pair(card)
  │  │     ├─ ::view-transition-old(card)
  │  │     └─ ::view-transition-new(card)
  │  └─ ::view-transition-group(identify)
  │     └─ ::view-transition-image-pair(identify)
  │        ├─ ::view-transition-old(identify)
  │        └─ ::view-transition-new(identify)
  ├─ head
  └─ physique
        └─ …

So, the complete snapshot needs to be the place we put the perspective. Proper? Seems, no.

In actual fact, does nothing in any respect! You’re left with this as an alternative of the attractive 3D flip we had been ready to make use of on the playing cards earlier:

Right here’s the code I used to be working with:

/* Cross-document View Transition opt-in */
@view-transition {
  navigation: auto;
}

/* 3D flip: Previous web page flips away, new web page flips in */
@keyframes flip-out {
  0% {
    remodel: rotateY(0deg);
    opacity: 1;
  }
  100% {
    remodel: rotateY(-90deg);
    opacity: 0;
  }
}

@keyframes flip-in {
  0% {
    remodel: rotateY(90deg);
    opacity: 0;
  }
  100% {
    remodel: rotateY(0deg);
    opacity: 1;
  }
}

::view-transition-old(root) {
  animation: flip-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  transform-origin: heart heart;
}

::view-transition-new(root) {
  animation: flip-in 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s backwards;
  transform-origin: heart heart;
}

Word: I didn’t reverse the animation right here since we flip to -90deg after which from 90deg. Not precisely the identical!

And it doesn’t work, regardless of if perspective is on html or :root:

/* 👎 */
html {
  perspective: 1100px;
}

/* 👎 */
:root {
  perspective: 1100px;
}

I did some digging and found that perspective (and 3D transformations generally) is certainly one of a number of CSS properties that might produce an uncommon impact. (Go away it to Bramus to have the reply!)

So… What will we do? Some concepts got here to thoughts, however sadly failed:

• I attempted setting the perspective property on the physique.
• I attempted setting perspective inside ::view-transition-group(root).
• I attempted setting perspective contained in the ::view-transition pseudo.

There’s truly an excellent easy workaround to this, and I can’t consider it took me this lengthy to determine it out — don’t use perspective in any respect!

The answer

Brief story: we now have to make use of the perspective() operate as an alternative of the perspective property. And never inside any of the ::view-transition-* pseudos as you would possibly count on, however contained in the @keyframes animation:

@keyframes flip-out {
  0% {
    remodel: perspective(1100px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    remodel: perspective(1100px) rotateY(-90deg);
    opacity: 0;
  }
}
@keyframes flip-in {
  0% {
    remodel: perspective(1100px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    remodel: perspective(1100px) rotateY(0deg);
    opacity: 1;
  }
}

This easy, however huge change strikes the scene from a flat meh to an exquisite ah yeah:

Right here’s why, apparently. The view transition pseudo-element tree is rendered outdoors the traditional HTML circulate. Extra particularly, the complete view transition tree is rendered above the DOM in its personal layer. Nonetheless, notably for ::view-transition, I’m not too positive why that is the case, however my greatest guess could be that every view transition group robotically has its place and remodel values overridden by the browser; therefore, interfering with the perspective.

The distinction between perspective and perspective()? The perspective property is utilized to the mum or dad ingredient, whereas perspective() is a remodel property operate utilized on to the ingredient itself. And because the view transition pseudo tree doesn't have a real mum or dad, we’ve gotta use perspective() because it doesn’t require a mum or dad. Phew.

To recap…

Setting perspective on the html, :root, or any of the view transition pseudo-class received’t work. And in case you have been struggling to seek out the answer, like I used to be, I believe this little, however huge perspective() change will clear up that situation for those who ever come throughout it. Take it from me, I battled with this for weeks until I got here again at the moment to rant about it and found an answer to it. A perk of writing!