.transition-text {
    display: inline-block;
    transform-origin: center;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Rotate and fade out */
.rotate-out {
    transform: rotateY(90deg);
    opacity: 0;
}

/* Rotate and fade in */
.rotate-in {
    transform: rotateY(-90deg);
    opacity: 0;
}

.rotate-reset {
    transform: rotateY(0deg);
    opacity: 1;
}



@keyframes spin-horizontal {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }