每次CSS變換都沿相同方向旋轉

Question

我希望每次單擊按鈕時，使網頁上的元素逆時針旋轉360度。 我發現一些示例代碼顯示了如何執行此操作，但是唯一的問題是當前它以交替的方向旋轉。

有沒有簡單的方法來確保元素每次都沿相同方向旋轉？

這是示例代碼： http : //codepen.io/impressivewebs/pen/niurC

.

干杯

Answer 1

您的示例添加和刪除了應用轉換的類，這具有在添加類時應用轉換的效果，然后在刪除類時撤消轉換的效果，因此第二次單擊時旋轉方向相反。

要每次增加旋轉次數，您可以使用JavaScript來保持當前旋轉值的計數，並在單擊按鈕時增加它。我在這里在CodePen上為您的示例添加了分叉： http ://codepen.io/anon/pen/ aObMYK進行說明。 請注意，我已將增量更改為30度，以便您可以更清楚地了解正在發生的情況。 如果您希望每次旋轉360度，只需更改counter += 30;設置的值即可counter += 30; 到360。

Answer 2

訣竅是增加旋轉而不是重新旋轉。 在下面的代碼中，我們將旋轉增加360度，這將使它在每次單擊時都向一個方向旋轉。

我只是更改了您的javascript函數來實現此目的：

var angle =0;
$('button').click(function () {
   angle += 360;
  $(".box").css({'transform': 'rotate(' + angle + 'deg)'});

});

完整代碼

 var angle =0; $('button').click(function () { //$('.box').toggleClass('box-rotate'); angle += 360; $(".box").css({'transform': 'rotate(' + angle + 'deg)'}); }); 

 .box { background: lightblue; width: 100px; height: 100px; margin: 20px auto; transition: transform 1s linear; transform-origin: top left; transform-style: preserve-3D; } .box-rotate { transform: rotate(360deg); } button { display: block; margin: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="box"></div> <button>click me</button> 

Answer 3

您在JS腳本中使用toggleClass。 切換方法用於在兩個值之間切換。 在該元素上使用toggleClass時，您將在每次單擊按鈕時添加和刪除box-rotate類。 要在dom上重復功能，您需要使用javascript，在這種情況下，您的代碼將如下所示

var counter = 0;

$('button').click(function () {
    var box = $('.box');
  // box.toggleClass('box-rotate');
    counter += 360;
  $('.box').css('transform', 'rotate(' + counter + 'deg)')
});

這是工作代碼 。