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: CodePen Embed Fallback 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 angles the element’s appearance: CodePen Embed Fallback 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 .card elements, making the 3D effect come to life so the flip looks how it should: Perhaps our keyframe animation to flip the .cards is something like this: @keyframes flipOut { from { transform: rotateY(0deg); } to { transform: rotateY(-90deg); } } Which we apply to the .cards like 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 forwards when the .flip-out class is appended to the .card (courtesy of JavaScript watching for a click) and runs in reverse when the .flip-in class is appended. That’s the setup for how a cross-document view transition ought to work, too, right? If an image supports