image is rotated only once

Question

I am trying to rotate the images. but its rotated only once and then it stops.
where am I going wrong and how to fix it .

Guess the second time it already has a class rotate90 so it doesnt rotate, tried removing the class and add it again but doesnt work.

.rotate90 {
    transform: rotate(90deg) ;
    -webkit-transform: rotate(90deg);

}

function RotateClockwise(){        
            var Ids = $(".ct input[type=checkbox]:checked").map(function(){
              return $(this).parent().attr('id');
            });
            var string = "";
                for(var i = 0; i< Ids.length; i++) {
                 string = Ids[i];                  
                 $("#img"+string).addClass('rotate90');
            }
            string = string.substring(0,string.length-1);      
    }

score 0 · Answer 1 · answered Jul 10 '15 at 20:00

If you want the image to do a full 360 degree rotation (with 4 steps, 90 degrees each) you should have 3 css-classes, for 90deg, 180deg, 270deg and walk step by step.
Here is an example:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<style type="text/css">
.rotate90 {
    transform: rotate(90deg) ;
    -webkit-transform: rotate(90deg);
}
.rotate180 {
    transform: rotate(180deg) ;
    -webkit-transform: rotate(180deg);
}
.rotate270 {
    transform: rotate(270deg) ;
    -webkit-transform: rotate(270deg);
}
</style>
<script>
function doRotations() {
    rotate_options = ['rotate90', 'rotate180', 'rotate270']
    el = $('#img1')
    if (el.attr('class') == undefined || el.attr('class') == '') {
        el.addClass(rotate_options[0]);
    } else {
        for (var i = 0; i <= rotate_options.length; i++) {
            if (el.hasClass(rotate_options[i])) {
                // If this is the last one - remove all classes
                if (i == rotate_options.length) {
                    el.removeClass()
                    break;
                } else {
                    el.removeClass();
                    el.addClass(rotate_options[i+1])
                    break;
                }
            }
        }
    }
    setTimeout(function(){doRotations()}, 1000);
}
$(function() {
    doRotations();
});
</script>
</head>
<body>
    <img src="http://dummyimage.com/200x200/000/fff" id="img1" />
</body>
</html>

You can see that each step I check what is the current stage go to the next one.

image is rotated only once

1 Answers1