图像只旋转一次

我想旋转图像。但它只旋转一次，然后停止。
我在哪里错了，如何解决它。图像只旋转一次

猜猜第二次，它已经有一个类旋转90，所以它不旋转，试图删除类，并再次添加，但没有奏效。

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

来源

2015-07-10 PSDebugger

如果你想要的形象做一个完整的360度旋转（带4个步骤，每90度），你应该有3个CSS类，为90度，180deg，270deg和步走的一步。
下面是一个例子：

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

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

来源

2015-07-10 20:00:29 Dekel

图像只旋转一次

回答

相关问题