html - 在关键帧期间重置两个之间的原点时如何旋转2+？

我尝试制作一个动画框，该动画框会在页面加载时自动展开。

我有一个提起的面板。我尝试将其旋转到地面90度，然后，我想根据另一条边缘90度再次将其提起。

我尝试更改原点（tr​​ansform-origin：top），但是将原点更改为原始原点。我必须添加2个平移以将其定位在正确的位置，但是会产生碰撞。地面上的边缘不会粘在地面上。

这是我当前的小提琴：https://jsfiddle.net/hbnta1uj/2/

我也尝试不修改原点，但仍然遇到了麻烦：

@keyframes slideFront2 {
    0% {
        transform: rotateX(-0deg);
    }
    50% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(-180deg) translateZ(-100px) translateY(100px);
    }
}

我有另一个想法，我已经将第二个面板放平了，我将其隐藏（不透明度0），当第一个面板放平时以50％的比例显示第二个，只是将其成90度。

但是我想了解更复杂的动画，是否有一种方法可以像我描述的那样始终通过从新位置开始新的转换来完成？

谢谢

最佳答案

我会考虑在容器上放一个动画，以使其在只需要一个关键帧的地方变得更容易：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  width: 90%;
  margin: auto;
  height: 100vh;
  background-color: rgb(194, 194, 194);
}

.progressbar-wrapper {
  width: 300px;
  height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 150px);
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-30deg);
}

.progressbar {
  width: 100%;
  height: 100%;
  transform-origin: bottom;
  animation: 0.5s ease-out 1 slideFront forwards;
  transform-style: preserve-3d;
}

.side {
  width: 100%;
  height: 100%;
  background-color: rgba(254, 254, 254, 0.3);
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes slideFront {
  100% {
    transform: rotateX(-90deg);
  }
}

.bottom {
  box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
}

.back {
  animation: 1s ease-out 0.5s 1 slideFront forwards;
  transform-origin: top;
}

<div class="container">
  <div class="progressbar-wrapper">
    <div class="progressbar">
      <div class="side back">
      </div>
      <div class="side bottom">
      </div>
    </div>
  </div>
</div>

关于html - 在关键帧期间重置两个之间的原点时如何旋转2+？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55819362/