Transitionground

    .horizontalRotation {
      view-transition-name: horizontal-rotation-transition;
    }
    
    ::view-transition-old(horizontal-rotation-transition) {
      backface-visibility: hidden; 
      animation: rotate-horizontal-to-back 500ms ease-in-out 1 forwards;
    }
    
    ::view-transition-new(horizontal-rotation-transition) {
      backface-visibility: hidden; 
      animation: rotate-horizontal-from-back 500ms ease-in-out 1 forwards;
    }

    @keyframes rotate-horizontal-to-back {
      from {
        transform: rotateY(0deg);
      }
      to {
        transform: rotateY(180deg);
      }
    }
    
    @keyframes rotate-horizontal-from-back {
      from {
        transform: rotateY(-180deg);
      }
      to {
        transform: rotateY(0deg);
      }
    }