css - 如何只在最后进行 CSS3 变换和旋转

Question

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

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

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

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

谢谢!

Answer 1

您需要使用所需的值设置更多关键帧。

因为要让旋转保持相同的位置(平移)，所以需要设置2个具有相同平移值的关键帧，只改变旋转

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

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