Question

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

猜第二次它已经有一个类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);      
    }

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

你可以看到我检查当前阶段的每个步骤转到下一阶段。

图像仅旋转一次

1 个答案: