如何在关键帧期间重置两者之间的原点时进行2+旋转？

Question

我尝试做一个动画框，它将在页面加载时展开。

我举起了一个小组。我尝试将它旋转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度。

但是我想知道更复杂的动画，如果有一种方法可以像我描述的那样去做，总是从新位置开始新的转换？

谢谢

Answer 1

我会考虑容器上的动画，以便在只需要一个关键帧时更容易：

* {
  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>

Answer 2

我发现的事情是，翻译功能中的顺序很重要。一切从左到右执行，因此如果你从左到右执行所有操作，旋转的原点将相对于元素的当前位置（这里的2个框获得相同的旋转平移但顺序不同：https://codepen.io/anon/pen/oOQGPp）

所以在我的例子中，如果你这样做：

    50.001% {
        transform: rotateX(90deg) translateZ(00px) translatey(100px) ;
        transition-timing-function: linear;
    }
    100% {
        transform: rotateX(0deg) translateZ(100px) translatey(00px) ;
        transition-timing-function: linear;
    }

在平移之前将应用旋转，因此旋转原点将不是翻译后的底线，但它将是没有基于翻译部分的原点的位置（因此它将是0％位置原点。）CSS将失败制作动画的路径，它会增加一点凹凸。

但是如果你做transform: TRANSLATE ROTATE，旋转将在平移后应用，因此旋转的原点将与平移的位置相关。这就是我能够旋转项目而不会出现小凹凸错误的方法。

这是完全固定的CSS。你可以在我原来的jsfiddle中运行它来查看结果

* {
    box-sizing: inherit;
    margin: 0;
}

html {
    box-sizing: border-box;
}

.container {
    width: 90%;
    margin: auto;
    height: 100vh;
    background-color: rgb(194, 194, 194);
}
.progressbar-wrapper {
    width: 300px;
    height: 100px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
.progressbar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-30deg);
}

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

@keyframes slideBottom {
    0% {
        transform: rotateX(-0deg);
    }
    100% {
        transform: rotateX(-90deg);
    }
}
@keyframes slideFront {
    0% {
        transform: rotateX(-0deg);
    }
    50% {
        transform: rotateX(-90deg);
    }
    50.001% {
        transform: translateZ(100px) rotateX(90deg);
        transition-timing-function: linear;
    }
    100% {
        transform: translateZ(100px) rotateX(0deg) ;
        transition-timing-function: linear;
    }
}

.bottom {
    animation: 0.5s ease-out 0s 1 slideBottom forwards;
    box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
    transform-origin: bottom;
}

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