如何为元素的转换设置动画，使其从上方落到屏幕上？

Question

我有一个元素应该在屏幕前面朝向用户，但也喜欢从上方掉下来。

我尝试过从rotateX(-90deg)到rotateX(0)以及从rotateX(360deg)到rotateX(270deg)的过渡，但这看起来并不是我想要的。

我也不认为是在Google上搜索此内容的好方法。

素描

源代码

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

我相信this是您想要的。

@-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;
  }
}

Answer 2

您需要更正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>