如何CSS3只在最后转换和旋转

Question

我试图让一块DIV向右移动300px，然后绕Y轴旋转180度，移回原点X位置，然后绕Y轴旋转180度。

 |-->---->----->------|
rotate             rotate
 |----<-----<-----<---|

我现在所拥有的东西同时旋转和移动。有什么方法可以逐步定义这些转换吗？

http://jsbin.com/nomuqe/edit?html,css,output

谢谢！

Answer 1

您需要设置更多具有所需值的关键帧。

由于您希望旋转保持相同的位置（平移），您需要设置2个关键帧具有相同的平移值并仅更改旋转

＆＃13;

＆＃13;

.test{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 20px 0 0px 20px;
  background: orange; 
  animation: move 4s infinite;
}
@keyframes move{
  0%{
    transform: translateX(0px)  rotateY(0deg);
  }
  49%{
    transform: translateX(300px) rotateY(0deg);
  }
  50%{
    transform: translateX(300px) rotateY(180deg);
  }
  100%{
    transform: translateX(0px) rotateY(180deg);
  }
}

＆＃13;

  <div class='test'></div>

＆＃13;

＆＃13;

＆＃13;