html - CSS动画使用rotateY翻转半圈

Question

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

正在被这个类翻转:

.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
}