CSS 使用rotateY翻转半圈的动画

Question

我正在尝试使用 CSS 制作动画。查看我的 fiddle：http://jsfiddle.net/xonuf2k1/1/

正在被这个class翻转：

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

您会注意到，当您 运行 fiddle 时，圆的一半向外折叠。我想要实现的是让那个圆圈向另一个方向折叠，所以右半边的圆边与左半边的圆边相遇。

动画将是一个大序列，但我一辈子都想不出如何让这个半圆翻转相反的方向。

感谢您的反馈！

Answer 1

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

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