CSS-трансформация вращается в одном и том же направлении каждый раз

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

Вы используете toggleClass в своем скрипте JS. Метод переключения используется для переключения между двумя значениями. Когда вы используете 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)')
});

Вот рабочий код.