title: How to do 2+ rotations while resetting the origin between each during a keyframe?
body: <p>I try to do an animated box that will unfold itself on the page load.</p>
  
  <p>I have a panel lifted up. I try to rotate it 90deg to the ground, and after, I would want to lift it up again based on the other edge 90deg.</p>
  
  <p>I tried to change the origin (transform-origin: top) but it change the origin to the original origin. I had to add 2 translation to position it at the right place but it create a bump. The edge on the ground don't stick on the ground.</p>
  
  <p>Here's my current fiddle: <a href="https://jsfiddle.net/hbnta1uj/2/" rel="nofollow noreferrer">https://jsfiddle.net/hbnta1uj/2/</a></p>
  
  <p>I also tried without modifying the origin but I still get a bump:</p>
  
  <pre><code>@keyframes slideFront2 {
      0% {
          transform: rotateX(-0deg);
      }
      50% {
          transform: rotateX(-90deg);
      }
      100% {
          transform: rotateX(-180deg) translateZ(-100px) translateY(100px);
      }
  }
  </code></pre>
  
  <p>I have another idea where I position the second panel flat already and I hide it (opacity 0) and at 50% when the first panel is flat I show the second and just 90deg it.</p>
  
  <p>But I would want to know for more complex animations if there's a way to do it the way I describe it, by always start at the new position the new transformation?</p>
  
  <p>Thanks</p>