css动画：转换原点似乎无法正常工作

Question

我正在制作这个3面板卡开场动画..这是我到目前为止所拥有的一个例子.. example。这是我申请第二个动画的类，变换原点似乎没有做我认为应该做的事情。但我对这个动画的东西很新。

.two-right {
  transform: rotateY(170deg);
  transform-origin: 100% 0;
}

正如你所看到的问题是我无法正确打开第二个动画..在左侧它工作得很好但在右边卡不能正确打开卡的右侧..现在我只是四处闲逛，没有找到任何东西。任何帮助，将不胜感激。

Answer 1

好吧，我找到了自己问题的答案。原因是翻盖是基于它的父母..这就是为什么它在错误的轴上旋转但是在缩放后动画完成它最终成为位置在正确的位置。

我没有尝试制作动画，而是在javascript中设置超时以使其缩放，然后再添加翻转动画。这是完成的代码。

Complete example

.two-right {
/*   transform: rotateY(170deg); */
  transform-origin: 100% 0;
}
.two-flip {
  transform: rotateY(160deg);
}

我先添加.two-right类，然后再添加.two-flip半秒钟。