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

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>

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

How to animate the transform of an element so that it falls from above coming towards the screen?

css

rotation

css-transforms

css-animations

素描

源代码