title: Why perspective isn't giving the same result when some styles are updated?
body: <p>I have two boxes with 3d transformation (rotationY). Each have almost the same values, one perspective looks fine, the other kinda wrong but still have some correct perspective.</p>
  <p>The first box at the top side does not protrude, but it have a perspective view yet. Also the 3° the container is 200% bigger</p>
  <p>The second box do a beautiful 3d effect.</p>
  <p>Here I made the example of what I'm trying to explain.</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-js lang-js prettyprint-override"><code>$(".eye").on('click', function () {
              $( '.man' ).toggleClass('open');      
          })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {  padding: 0;  margin: 0; }
          .eye { padding: 6px 8px; }
          .universe {
              background: rgb(0 0 255 / 0.3);
              position: absolute;
              height: 100%;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          .dark {
            background: rgb(0 255 0 / 0.3);
            width: 25%;
            height: 25%;
          }
          .god {
            background: rgb(255 0 0 / 0.3);
            transform-style: preserve-3d;
            transform: perspective(800px);
          }
          .man {
            position: absolute;
            transform-origin: top left;
            transition: 1s all linear;
          } 
          .man.open {
            transform: rotateY(-60deg); 
          }
          .life {
            background: rgb(255 255 0 / 0.36);
            width: 25vw;
            height: 25vh;              
          }
          .no.god {
            height: 100%;
          }
          .no.man {
            position: relative; 
          }
          .yes.god {
            height: 200%;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="universe"&gt;
                &lt;div class="dark"&gt;
                  &lt;div class="god"&gt;
                    &lt;div class="man"&gt;
                      &lt;div class="life"&gt;Nothing happens until something moves.&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;button class="eye"&gt; OPEN &lt;/button&gt;
                &lt;div class="dark no"&gt;
                  &lt;div class="god no"&gt;
                    &lt;div class="man no"&gt;
                      &lt;div class="life no"&gt;Nothing happens until something moves.&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
               &lt;button class="eye"&gt; OPEN &lt;/button&gt;
                &lt;div class="dark yes"&gt;
                 &lt;div class="god yes"&gt;
                  &lt;div class="man yes"&gt;
                    &lt;div class="life yes"&gt;Nothing happens until something moves.&lt;/div&gt;
                  &lt;/div&gt;
                 &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I think something is working wrong, but can't figure it out why. Can someone explain me why it's behaving like that?</p>