CODEWITHSUNDEEP
javascriptjqueryhtmlcss
artbarzz
artbarzz

Reputation: 93

Image rotating wide of off screen

i have this code here but my image goes way to far right off of my apps screen i want it to kind of be static but still spin in place or maybe just move around a little bit not so much as it does in this code any advice would be appreciated , thank you !

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

Upvotes: 1

Views: 311

Answers (1)

mark_c
mark_c

Reputation: 1212

The problem is that the image has a canvas size much larger than the visible portion itself. The rotation happens around the centre of the image so you're seeing the issues in the rotation. If you crop the star out, the problem should be fixed.

Also, would it not be easier to do this with CSS? 

#img1 {
  transition: 0.7s linear;
}

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

See http://jsfiddle.net/bfvwweah/1/

Edit: Permanent rotation example: http://jsfiddle.net/bfvwweah/3/

Upvotes: 2

Related Questions