动画图像以使其旋转一圈

我正在处理图像转换，旋转和关键帧，但是我试图让图像旋转一圈，这是一个问题。 我把它设置为旋转360deg和两个关键帧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>

---

加

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

到你的风格

由于图像比容器大，因此它偏移了偏移量。 如果您希望移动转换的起点，请使用transform-origin属性

---

你需要给它一个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/87839.html

上一篇: Animating an image to make it rotate in a circle

下一篇: Image Slideshow