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

Question

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

我曾尝试从rotateX(-90deg)过渡到rotateX(-90deg) rotateX(0)以及从rotateX(360deg) rotateX(-90deg)过渡到rotateX(-90deg) 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

我相信这就是你要找的。

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