Question

我正在进行图像变换，旋转和关键帧，但我在尝试让图像旋转成圆圈时遇到了一些问题。我将它设置为旋转360度和两个关键帧0和100.我希望图像从图像的中心点旋转，所以看起来好像加载圆正在加载某些东西。

现在看来图像从左上角旋转。

有人看到我做错了吗？

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

Answer 1

添加

$(document).ready(function() {
      	$('.second-part').hide() 
		$('.last-part').hide()
		$('.overlay').hide() 
       
	   $('.submit-first-part').click(function() {
		   $('.first-part').hide();
		   $('.second-part').fadeToggle(1000);
	   });
	   
	   $('.submit-second-part').click(function() {
		   $('.second-part').hide();
		   $('.last-part').fadeToggle(1000);
	   });
	   
	   $('.cancel').click(function() {
		   $('.second-part').hide();
		   $('.last-part').hide();
		   $('.first-part').fadeToggle(1000);
	   });
	   
	   $('.chat-topic').click(function() {
		   $('.overlay').fadeToggle(1000);
	   });
	   
	   
	   //contenteditable
	   $('.contenteditable').focus(function() {
    	$(this).empty();
		});
	   
	
});

到你的风格

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

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>

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

2 个答案: