如何使用 css3 通过具有相同的开始和结束度来在圆周运动中移动图像

Question

.ball{
  position:absolute;
  top: 200px;
  left: 300px;
  height:100px;
  width:100px;
  background-color: yellow;
 border-radius: 100px;
 -webkit-animation: balls 4s linear;
 animation: balls 4s linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes balls {
 0% { transform: rotate(0deg) translateX(150px)  rotate(0deg); }
 100%   { transform: rotate(0deg) translateX(150px)  rotate(360deg); }
}

@keyframes balls {
 from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
 to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
 }

以上是我在圆周运动中旋转的代码。我希望我的起点和终点相同，并且它应该以圆周运动旋转。请帮助我

Answer 1

我会用这段代码来旋转图像（它永远不会停止）：

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

如果您只想要 360 度，请删除无限一词，它应该可以工作。

编辑：这是一个演示

Answer 2

找到了我的问题的解决方案。

通过具有"从"度数，我们可以将"到"度数

计算为"from+359"，因此它将通过具有单个度数来旋转整个圆圈