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

我正在制作这个3面板的卡片打开动画。。这是我到目前为止的一个例子。这是我正在申请的第二个动画和变换原点的类，它似乎没有做我认为应该做的。。但我对这部动画片很陌生

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

---

正如您所看到的，问题是我无法正确打开第二个动画。。在左侧，它工作正常，但在右侧，卡的右侧无法正确打开卡。。现在我只是随便看看，什么也没找到。任何帮助都将不胜感激

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

我没有尝试制作动画，而是在javascript中设置了一个超时，让它进行缩放，然后在以后添加翻转动画。这是完整的代码

我首先添加.two right类，然后在半秒钟后添加.two翻转

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