title: CSS transform perspective rotateX with transition rapidly hover in out glitch
body: <p>Here is my code.</p>
  
  <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>.ground {
          height: 250px;
          width: 250px;
          background-color: tomato;
          margin: 50vh auto;
          transform: translateY(-50%);
      }
  
      .floor-1 {
          height: 100%;
          width: 100%;
          background-color: turquoise;
          transition: transform 3s;
      }
  
      .floor-1:hover {
          transform-origin: left center;
          transform: perspective(50em) rotateX(180deg);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ground"&gt;
      &lt;div class="floor-1"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now when i try hover in and out 5-10 times is 2-3 s it gives me weird behavior. Div floor-1 nearly about to come out of screen. Why this is happening and how to solve it?</p>