Animating an image to make it rotate in a circle

I am working on image transforms, rotates, and keyframes, but I am having a bit of an issue trying to get an image to spin in a circle. I have it set to rotate 360deg and two keyframes 0 and 100. I am wanting the image to spin from the center point of the image, so it looks as if the loading circle is loading something.

Right now it seems the image spins from the top-left corner.

Does anyone see what I am doing wrong?

#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>

---

Add

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

to your styles

It's spinning on an offset because the image is bigger than the container. If you wish to move the origin of transformations, use the transform-origin property

---

你需要给它一个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>

链接地址: http://www.djcxy.com/p/87840.html

上一篇: 为什么Intellij IDEA不显示符号？

下一篇: 动画图像以使其旋转一圈