Как оживить преобразование элемента так, чтобы он падал сверху, приближаясь к экрану?

Question

У меня есть элемент, который должен приближаться к пользователю перед экраном, но также как будто он падает сверху.

Я пытался перейти с rotateX(-90deg) на rotateX(0) и с rotateX(360deg) на rotateX(270deg), но это выглядит не так, как я хочу.

Кроме того, я не знаю, что было бы хорошим способом поиска этого в Google.

Sketch

Исходный код

body {
  margin: 0 0;
}

.my-class-here {
  width: 100%;
  height: 100vh;
  animation-name: header-anim;
  animation-duration: 5s;
  width: 200px;
  height: 200px;
  background-color: yellow;
  text-align: center;
}

@keyframes header-anim {
  0% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotateX(270deg);
  }
}

<div class="my-class-here">
  TEST
</div>

Как мне этого добиться?

Спасибо!

Answer 1

Вам нужно исправить свой transform-origin и добавить некоторую перспективу:

body {
  margin: 0 0;
}

.my-class-here {
  animation: header-anim 2s;
  width: 200px;
  height: 200px;
  background-color: yellow;
  text-align: center;
  transform-origin:top; /* don't forget this */
}

@keyframes header-anim {
  0% {
    transform: perspective(200px) rotateX(270deg);
  }
  100% {
    transform: perspective(200px) rotateX(360deg);
  }
}

<div class="my-class-here">
  TEST
</div>

Answer 2

Я считаю, что это - это то, что вы ищете.

@-webkit-keyframes slide-in-fwd-tr {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
            transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-tr {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
            transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}