❗ Perspective

Please note that 3D-effects require the CSS perspective property to be set on a parent of the transformed element.

For browsers that natively support view transition good choices for that parent are the ::view-transition-group or ::view-transition-image-pair pseudo element, which is the parent of the ::view-transition-old and ::view-transition-new pseudo elements.

1
  ::view-transition-image-pair(*) {
2
    perspective: 50cm;
3
  }

The animations offered by the Bag of Tricks generate this for you, so you are already save on browsers that natively support view transitions.

For browsers that do not natively support view transitions, there are no such pseudo elements. For Astro’s fallback mode for view transitions to work properly with 3D animations, you have to set the perspective on a regular HTML element that is a parent of the animated element in the DOM.

Here is how this is done in the animation demo:

1
  ...
2
  <div style="perspective: 50cm">
3
    <div id="demo">
4
      <a href="./#">Flip</a>
5
      <slot />
6
      <br style="clear:both" />
7
    </div>
8
  </div>
9
  ...

Clipping

The same applies to clipping: To support browsers that do not implement native view transitions, set overflow to clip on a parent element in the DOM. For browsers that support native view transitions, set it to the ::view-transition-group or ::view-transition-image-pair pseudo-elements. Unlike perspective, overflow is not set by default as it is not clear whether you want clip or visible. In future versions you may be able to set this with a parameter.

1
  ...
2
  <div style="perspective: 50cm; overflow: clip">
3
    <div id="demo">
4
      ...
5
    </div>
6
  </div>
7
  <style>
8
    ::view-transition-image-pair(*) {
9
      overflow: clip;
10
    }
11
  <style>