Question

每次单击按钮时，我都想让网页上的元素逆时针旋转360度。我找到了一些示例代码，展示了如何执行此操作，但唯一的问题是当前它以交替方向旋转。

是否有一种简单的方法可以确保元素每次都以相同的方向旋转？

以下是示例代码：http://codepen.io/impressivewebs/pen/niurC

干杯

Answer 1

您的示例添加并删除应用转换的类，该类具有在添加类时应用转换的效果，然后在删除类时撤消它，因此在第二次单击时反转旋转。

要每次增加旋转，您可以使用JavaScript来保持当前旋转值的计数，并在单击按钮时递增它，我在CodePen上分享了您的示例：http://codepen.io/anon/pen/aObMYK来说明。请注意，我已将增量更改为30度，以便您可以更清楚地了解更多内容。如果您希望每次都将其旋转为360度旋转，只需将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)')
});

这是工作code。

CSS转换每次都以相同的方向旋转

3 个答案: