图像在屏幕外旋转

Image rotating wide of off screen

本文关键字：旋转 屏幕 图像      更新时间：2023-09-26

我在这里有这段代码，但我的图像在应用程序屏幕的右边，我希望它是静态的，但仍然在原地旋转，或者只是移动一点，不像在这段代码中那样多任何建议都将不胜感激，谢谢！

<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>

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

另外，使用CSS不是更容易做到这一点吗？

#img1 {
  transition: 0.7s linear;
}
#img1:hover {
  transform: rotate(360deg);
}

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

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

相关文章：