title: How to animate the transform of an element so that it falls from above coming towards the screen?
body: <p>I have an element that should come towards the user in front of the screen but also like falling from above.</p>
  
  <p>I have tried transitioning from <code>rotateX(-90deg)</code> to <code>rotateX(0)</code> and from <code>rotateX(360deg)</code> to <code>rotateX(270deg)</code>, but it does not look the way I want.</p>
  
  <p>Also I do not what would be a good way to search for this on Google.</p>
  
  <h1>Sketch</h1>
  
  <p><a href="https://i.stack.imgur.com/bugDi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bugDi.jpg" alt="sketch"></a></p>
  
  <h1>Source code</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="my-class-here"&gt;
    TEST
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I achieve this?</p>
  
  <p>Thank you!</p>