Question

我在这里有这个代码，但我的图像远离我的应用程序屏幕，我希望它有点静态但仍然旋转到位或者可能只是移动一点点而不是它在这个码任何建议将不胜感激，谢谢！

<script>
var looper;
var degrees = 0;
function rotateAnimation(el,speed){
    var elem = document.getElementById(el);
    if(navigator.userAgent.match("Chrome")){
        elem.style.WebkitTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Firefox")){
        elem.style.MozTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("MSIE")){
        elem.style.msTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Opera")){
        elem.style.OTransform = "rotate("+degrees+"deg)";
    } else {
        elem.style.transform = "rotate("+degrees+"deg)";
    }
    looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
    degrees++;
    if(degrees > 359){
        degrees = 1;
    }
    document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}
</script>

HTML

<img id="img1" src="http://s8.postimg.org/h719p5x85/transimage.png" alt="cog1">
<script>rotateAnimation("img1",15);</script>

Answer 1

问题是图像的画布尺寸远大于可见部分本身。旋转发生在图像的中心周围，因此您可以看到旋转中的问题。如果您将星星裁剪掉，问题应该得到解决。

另外，用CSS做这件事会不容易？

#img1 {
  transition: 0.7s linear;
}

#img1:hover {
  transform: rotate(360deg);
}

请参阅http://jsfiddle.net/bfvwweah/1/

编辑：永久轮换示例：http://jsfiddle.net/bfvwweah/3/

图像旋转宽屏幕

1 个答案: