CSS transform 每次都向同一个方向旋转

Question

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

有没有一种简单的方法可以保证元素每次都向同一个方向旋转？

$('button').click(function() {
  $('.box').toggleClass('box-rotate');
});

.box {
  background: lightblue;
  width: 200px;
  height: 200px;
  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://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="box"></div>
<button>click me</button>

View on CodePen

Answer 1

您的示例添加和删除应用转换的 class，其效果是在添加 class 时应用转换，然后在添加 class 时撤消它被移除，因此第二次点击时旋转反转。

要每次增加旋转，您可以使用 JavaScript 来计算当前旋转值并在单击按钮时增加它，我在 CodePen 上创建了您的示例：http://codepen.io/anon/pen/aObMYK 来说明。请注意，我已将增量更改为 30 度，以便您可以更清楚地看到发生了什么。如果你想每次都是360度旋转，只需将counter += 30;中设置的值改为360即可。

var counter = 0;
$('button').click(function() {
  counter += 30;
  $('.box').css('transform', 'rotate(' + counter + 'deg)')
});

.box {
  background: lightblue;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  transition: transform 1s linear;
  transform-origin: top left;
  transform-style: preserve-3D;
}

button {
  display: block;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="box"></div>
<button>click me</button>

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。 Toggle 方法用于在两个值之间切换。当您在该元素上使用 toggleClass 时，您将在每次单击按钮时添加和删除 box-rotate class。要在 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 transform 每次都向同一个方向旋转

CSS transform rotate in the same direction each time

javascript

css

transition

transform

rotation