当前位置：首页 > Database

Why Isn't My 3D View Transition Working?

If you have played around with view transition a bunch, you may have noticed that 3D transitions between two pages (i.e., cross-document view transitions) don’t seem to work. That is, at least not without the browsers flattening things first.

Image elements are the best example to demonstrate this because, like the snapshots a browser takes of the before-after states in a view transition, images are replaced elements so, in theory, we should be able to use them as a sort of reduced test case for 3D animations. For example, flipping one image to reveal another on click looks like this:

It’s important to note that, for the animation to work properly, we need to set the perspective property on the image’s parent container (in our case, it’s the .scene element). Otherwise, the 3D transformation is merely flat. It sort of anglesthe element’s appearance:

In CSS, the parent’s persepective is applied to all its children, excluding itself:

.scene {   perspective: 1200px;  .card {  /* gets perspective */ }}

What’s important here is the HTML structure. Specifically how the .scene container sits on top of the child .cardelements, making the 3D effect come to life so the flip looks how it should:

<div class="scene"><div class="card"><!-- Card Content Here --></div></div>

Perhaps our keyframe animation to flip the .cardsis something like this:

@keyframes flipOut {   from {     transform: rotateY(0deg);  }  to {     transform: rotateY(-90deg);  }}

Which we apply to the .cardslike this:

.card.flip-out {   animation: flipOut 5.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;}.card.flip-in {   animation: flipOut 5.2s cubic-bezier(0.4, 0, 0.2, 1) forwards reverse;}

…where the animates runs forwardswhen the .flip-outclass is appended to the .card(courtesy of JavaScript watching for a click) and runs in reversewhen the .flip-inclass is appended.

That’s the setup for how a cross-document view transition ought to work, too, right? If an image supports a 3D animation, then a view transitions snapshot should do the same. Let’s poke at that.

Setting up the view transition

First things first, we have to opt into view transitions on both pages with the @view-transition at-rule by setting the navigation descriptor to auto:

@view-transition {   navigation: auto;}

If we were to do nothing else, then one page fades into another when navigating between the two. It’s the most basic of all cross-document view transitions.

How do we customize things? We use the ::view-transition-old() and ::view-transition-new() pseudo-classes, where the former is the “old” snapshot and the latter is the “new” one. Like the .cardelements we used in the last example, that’s where we set the keyframe animation:

::view-transition-old(root) {   /* animation goes here */}::view-transition-new(root) {   /* animation goes here */}

The root parameter tells the view transition to target the whole page and all the elements created (and not created) by the view transition’s default snapshot group.

Here’s the problem

Let’s say we want to apply that same 3D flip to the entire webpage, where the snapshot of the “old” page flips into the “new” page. Again, a 3D animation asks us for two things:

  1. The perspective property on the parent element so its children get that 3D effect
  2. An animation on the page for when the view transition happens

But: What exactly do we set the perspective on, as in, what is the parent element here?

Since view transitions take snapshots of the entire webpage, we might assume (logically) it would be the <html>element (or the :root), right? I mean, the DOM tree looks like this when a view transition is present:

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

So, the entire snapshot should be where we put the perspective. Right? Turns out, no.

In fact, does nothing at all! You’re left with this instead of the beautiful 3D flip we were able to use on the cards earlier:

GitHub Source and Live Demo

Here’s the code I was working with:

/* Cross-document View Transition opt-in */@view-transition {   navigation: auto;}/* 3D flip: Old page flips away, new page flips in */@keyframes flip-out {   0% {     transform: rotateY(0deg);    opacity: 1;  }  100% {     transform: rotateY(-90deg);    opacity: 0;  }}@keyframes flip-in {   0% {     transform: rotateY(90deg);    opacity: 0;  }  100% {     transform: rotateY(0deg);    opacity: 1;  }}::view-transition-old(root) {   animation: flip-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;  transform-origin: center center;}::view-transition-new(root) {   animation: flip-in 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s backwards;  transform-origin: center center;}

Note:I didn’t reverse the animation here since we flip to -90deg and then from 90deg. Not exactly the same!

And it doesn’t work, no matter if perspectiveis on htmlor :root:

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

I did some digging and discovered that perspective (and 3D transformations in general) is one of several CSS properties that would produce an unusual effect. (Leave it to Bramus to have the answer!)

So… What do we do? Some ideas came to mind, but sadly failed:

  • I tried setting the perspective property on the body.
  • I tried setting perspectiveinside ::view-transition-group(root).
  • I tried setting perspectiveinside the ::view-transition pseudo.

There’s actually a super simple workaround to this, and I can’t believe it took me this long to figure it out — don’t use perspectiveat all!

The solution

Short story: we have to use the perspective()function instead of the perspectiveproperty. And not inside any of the ::view-transition-* pseudos as you might expect, but inside the @keyframes animation:

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

This simple, but big change moves the scene from a flat mehto a beautiful ah yeah:

GitHub Source and Live Demo

Here’s why, apparently. The view transition pseudo-element tree is rendered outsidethe normal HTML flow. More specifically, the entire view transition tree is rendered above the DOM in its own layer. However, particularly for ::view-transition, I’m not too sure why this is the case, but my best guess would be that each view transition group automatically has its position and transform values overridden by the browser; hence, interfering with the perspective.

The difference between perspectiveand perspective()? The perspectiveproperty is applied to the parent element, while perspective()is a transformproperty function applied directly to the element itself. And since the view transition pseudo tree does not have a true parent, we’ve gotta use perspective()since it doesn’t require a parent. Phew.

To recap…

Setting perspective on the html, :root, or any of the view transition pseudo-class won’t work. And if you have been struggling to find the solution, like I was, I think this little, but big perspective() change will solve that issue if you ever come across it. Take it from me, I battled with this for weeks till I came back today to rant about it and discovered a solution to it. A perk of writing!

  1. Setting up the view transition
  2. Here’s the problem
  3. The solution
  4. To recap…

Comments

  1. Martin Trapp Permalink to comment#

    You can also just set perspective on the parent as usual. The only thing to remember is that, when animating view transition pseudos, the direct parent of both the old and new images is the image-pair pseudo element:

    ::view-transition-image-pair(root) {     perspective: 50cm;}

    For more context see Fun with View Transitions

    Reply
    • Sunkanmi Fafowora Permalink to comment#

      Helpful!

      Thanks for this.

  2. Blondebeard Permalink to comment#

    Great writeup! Worth noting that if you’re using a parent perspectiveproperty with transform-style: preserve-3dto create a shared 3D space, Safari has an additional issue. It flattens the 3D context entirely when taking snapshots, so the workarounds above won’t help. This affects view transitions and tab thumbnails alike. There are two open WebKit bugs tracking it (#283568 and #302166) with little activity since filing, so any extra visibility helps.

    Reply
    • Sunkanmi Fafowora Permalink to comment#

      Wow.

      Thank you for this! This is something worth noting for the community. I hope this gets fixed real soon!

Leave a Reply Cancel reply

分享到：

相关推荐


最近发表
随机阅读
搜索
友情链接