圖像只旋轉一次

我想旋轉圖像。但它只旋轉一次，然後停止。
我在哪裏錯了，如何解決它。圖像只旋轉一次

猜猜第二次，它已經有一個類旋轉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

圖像只旋轉一次

回答

相關問題