javascript - 图像在屏幕外旋转

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

问题是图像的 Canvas 尺寸比可见部分本身大得多。旋转发生在图像的中心周围，因此您会看到旋转中的问题。如果你把星星剪掉，问题就应该解决了。

还有，用 CSS 做这件事不是更容易吗？

#img1 {
  transition: 0.7s linear;
}

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

参见 http://jsfiddle.net/bfvwweah/1/

编辑:永久旋转示例:http://jsfiddle.net/bfvwweah/3/