图像只旋转一次答案

【问题标题】：image is rotated only once图像只旋转一次
【发布时间】：2015-07-10 18:28:11
【问题描述】：

我正在尝试旋转图像。但它只旋转了一次然后就停止了。
我在哪里出错以及如何解决它。

第二次猜测它已经有一个类 rotate90 所以它不旋转，尝试删除该类并再次添加它但不起作用。

.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);      
    }

【问题讨论】：

标签： jquery rotation

【解决方案1】：

如果您希望图像进行完整的 360 度旋转（有 4 个步骤，每个步骤 90 度），您应该有 3 个 css 类，分别为 90 度、180 度、270 度，并一步一步地走。
这是一个例子：

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

你可以看到每一步我检查当前阶段是什么进入下一个阶段。

【讨论】：