每次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)')
});

这是工作代码 。