将图像制作成圆形旋转的动画

Question

我正在处理图片的转换、旋转和关键帧动画，但是在尝试让一张图片做圆周运动时遇到了问题。我将其设置为绕中心点旋转360度，在0和100两个关键帧上设置好了。我想让图片从图像的中心点旋转，使得它看起来像是正在加载某些东西。

目前看来，图像似乎是从左上角开始旋转的。

有没有人看出我做错了什么？

#spinning-circle {
  animation-name: spinning-circle;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  width: 40px;
  height: 40px;
}

@-webkit-keyframes spinning-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<div id="spinning-circle">
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>

- Becky

Answer 1

添加

#spinning-circle img {
  width: 100%;
  height: auto;
}

对于你的样式

由于图片比容器大，所以它会在偏移量上旋转。如果你想要移动变换的原点，请使用transform-origin属性。

- Joseph Young

---

你知道如何使它在结束时不变慢吗？这样它就能保持恒定的速度了吗？ - Sam

@Sam 你需要在 #spinning-circle 中添加 animation-timing-function 属性，并将其设置为 linear，而不是默认的 ease。 - Joseph Young

Answer 2

您需要添加 transform-origin 属性。

#spinning-circle {
  animation-name: spinning-circle;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  width: 40px;
  height: 40px;
}

@-webkit-keyframes spinning-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 125% 125%;
    transform-origin: 125% 125%;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: 125% 125%;
    transform-origin: 125% 125%;
  }
}

<div id="spinning-circle">
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>

- Lloyd Banks

---

为什么我需要给它一个起点？没有它也能工作。在这种情况下的目的是什么？ - Becky

@Becky 如果你想保持图片的自然高度/宽度，你必须拥有它。 - Lloyd Banks