3D-флип букв

Буквы встают с «пола» переворотом rotateX в перспективе, каскадом.

«Повторить» — в углу.

Код

<h1 class="flip3d" data-flip="ТЕКСТ"></h1>

<style>
.flip3d { perspective: 600px; }             /* глубина сцены */
.flip3d span { display: inline-block; opacity: 0;
  transform: rotateX(-92deg);
  transform-origin: 50% 100%;               /* ось — низ буквы */
  backface-visibility: hidden; }
.flip3d.play span {
  animation: f .7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i) * 55ms); }
@keyframes f { to { opacity: 1; transform: rotateX(0); } }
</style>

<!-- JS: разбить на span с --i, как в других буквенных эффектах -->

Промпт для ИИ

Сделай 3D-переворот букв: родителю perspective:600px; буквы-спаны изначально opacity 0 и rotateX(-92deg) с transform-origin 50% 100% (встают с «пола»); при появлении в кадре каждая доворачивается к rotateX(0) за 0.7s по cubic-bezier(0.16,1,0.3,1) с каскадом 55мс. backface-visibility:hidden обязательно.