首页 文章

动画图像以使其以圆圈旋转

提问于
浏览 次
2

我正在进行图像变换，旋转和关键帧，但是我试图让图像在一个圆圈中旋转时遇到了一些问题 . 我将它设置为旋转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>
html css css3 transform

2 回答

  • 3

    加

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

    你的风格

    它在偏移处旋转，因为图像比容器大 . 如果要移动转换的原点，请使用transform-origin属性

    回复于
  • 5

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

相关问题