CSS变换每次都向同一个方向旋转答案

【问题标题】：CSS transform rotate in the same direction each timeCSS变换每次都向同一个方向旋转
【发布时间】：2015-07-02 18:52:32
【问题描述】：

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

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

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

干杯

【问题讨论】：

标签： javascript css rotation transform transition

【解决方案1】：

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

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

【讨论】：

太棒了，谢谢！感谢其他所有回复类似答案的人:)

【解决方案2】：

您在 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。

【讨论】：

【解决方案3】：

诀窍是增加轮换而不是重新设置轮换。在下面的代码中，我们将不断增加旋转 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>

【讨论】：