【问题标题】：How to animate the transform of an element so that it falls from above coming towards the screen?如何为元素的变换设置动画，使其从上方落向屏幕？
【发布时间】：2020-03-31 05:04:49
【问题描述】：

我有一个元素应该在屏幕前冲向用户，但也像从上面掉下来一样。

我尝试从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>

我怎样才能做到这一点？

谢谢！

【问题讨论】：

标签： css rotation css-animations css-transforms

【解决方案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>

【讨论】：

【解决方案2】：

我相信this 就是您要找的。p>

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

【讨论】：

感谢您提供的精彩链接！我现在用这个：animista.net/play/entrances/swing-in/swing-in-top-fwd。如果您更改答案以链接到该动画，我将接受您的答案。
我赞成您的回答，但我选择了 Temani Afif 的解决方案，因为它更简单且帧速率更高。