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

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>

在 CodePen 上查看

Answer 1

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

要每次增加旋转，您可以使用 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>