CODEWITHSUNDEEP
javascripthtmlcss
AlexT 96
AlexT 96

Reputation: 29

How to rotate an image back and forth with JavaScript

I am trying to create a website and on the website I want the faces to rotate to certain point and then rotate back in the opposite direction until a certain point, I would like it if they could keep doing this forever but I can only get it to do a full rotation forever does anyone know how to fix this?

This is my HTML code:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BSDC</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <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>
</head>
<body>
    <img id="Dave" src="Images/Dave.png"/>
    <script>rotateAnimation("Dave",30);</script>
    <img id="Andy" src="Images/Andy.png" />
    <script>rotateAnimation("Andy",30);</script>
    <img id="Dan" src="Images/Dan.png" />
    <script>rotateAnimation("Dan",30);</script>
    <img id="Nico" src="Images/Nico.png" />
    <script>rotateAnimation("Nico",30);</script>
</body>
</html>

And this is my CSS code

body {
    font-family: Arial, sans-serif;
    background-image: url("Images/BSDC.png");
    background-repeat: no-repeat;
}
#Dave {
    position: absolute;
    margin-left: 3%;
    margin-top: 3%;
}
#Andy {
    margin-left: 3%;
    margin-top: 35%;
    position: absolute;
}
#Dan {
    margin-left: 85%;
    margin-top: 3%;
    position: absolute;
}
#Nico {
    margin-left: 85%;
    margin-top: 35%;
    position: absolute;
}

Upvotes: 1

Views: 2511

Answers (1)

Shan Robertson
Shan Robertson

Reputation: 2742

You can do this all with CSS animation. Check out this jsFiddle

the browser prefixes are annoying... and if anybody knows if this can be simplified please comment. But this is the concept, you set an animation on your element:

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

and then you define your animation, you can do any property changes and make as many steps in it as possible, i just used basic values (0, 25, 50 100)

@keyframes NAME-YOUR-ANIMATION {
  0%   { transform: rotate(0deg); }
  25% { transform: rotate(45deg); }
  50% { transform: rotate(-45deg); }
  100% { transform: rotate(0deg); }
}

You can read up on this stuff on MDN

Upvotes: 6

Related Questions