如何仅在最后进行 CSS3 变换和旋转

【问题标题】：how to CSS3 transform and rotate only at the end如何仅在最后进行 CSS3 变换和旋转
【发布时间】：2015-11-10 14:12:46
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

标签： css transform

【解决方案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);
  }
}

  &lt;div class='test'&gt;&lt;/div&gt;

【讨论】：

嗨瓦尔斯！感谢您的回答！你能解释一下为什么 49% 和 50% 都有 translateX(300px?)
在答案中添加了更多细节