如何对元素的变换进行动画处理，使其从上方落到屏幕上？

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

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

我相信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;
  }
}