使用rotateY翻转半圈的CSS动画

Question

我试图用CSS制作动画。看看我的小提琴：http://jsfiddle.net/xonuf2k1/1/

这个课程正在翻转：

.green .half.right.rotate{
  transform:rotateY(180deg);
}

你会注意到，当你操作小提琴时，圆圈的一半会向外折叠。我想要实现的是让那个圆圈在另一个方向折叠，所以右半边的圆边与左半边的圆边相遇。

动画将是一个很大的序列，但我不能为我的生活弄清楚如何让这个半圈转向相反的方向。

感谢您的反馈！

Answer 1

将此transform-origin: top left添加到.green .half.right.rotate

.green .half.right.rotate {
   transform: rotateY(180deg);
   transform-origin: top left
}