如何从当前状态向前或向后旋转元素

Question

假设我有三个元素。当用户单击任何元素时，该元素每次单击时都需要旋转 +120 度或 -120 度（方向随机选择，没有特定顺序）。所以如果它当前的旋转是 120 度，当它再次点击时，它会再旋转 120 度。我需要它在随机正负旋转之间交替。所以它可以向前或向后旋转...

这是我目前拥有的代码：

var aElement = $(".element").each(function(){});

aElement.on('click', function() {

    $(this).css("transform", "rotate(120deg");

})

非常感谢任何帮助。

Answer 1

我建议使用 data-* 属性来检查被点击的元素是否被旋转而不使用（1和0）然后进行反转，检查下面的示例。

希望这会有所帮助。

$('body').on('click', '.element', function() {
  if ( $(this).data("rotated")==='1' ) {
    $(this).css("transform", "rotate(0deg").data("rotated","0");
  } else {
    $(this).css("transform", "rotate(120deg").data("rotated","1");
  }    
})

.element{
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img  data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />
<img  data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />
<img  data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />

更新

对于随机旋转，您可以生成一个随机布尔值并对其设置条件，请查看以下示例。

$('body').on('click', '.element', function() {
  var random_rotation_state = Math.random() >= 0.5;
  var rotation = parseInt($(this).data('rotation'));
  
  if ( random_rotation_state )
    rotation+= 120;
  else
    rotation-= 120;
  
  $(this).css("transform", "rotate("+rotation+"deg").data("rotation", rotation);
  console.log(rotation);
})

.element{
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img  data-rotation='0' class="element" src='http://haizdesign.com/wp-content/uploads/2012/05/css3-featured.png' />
<img  data-rotation='0' class="element" src='http://az676930.vo.msecnd.net/media/1328/3_html5___css3_integration.png' />

Answer 2

我的立场是正确的。 $(this).css('transform') 没有给我们数字角度。相反，它给了我们类似matrix(-0.5, 0.866025, -0.866025, -0.5, 0, 0) 的东西。请记住，您需要对其余的浏览器前缀执行此操作。

原文来源：https://css-tricks.com/get-value-of-css-rotation-through-javascript/

$('.element').click(function(elm){
	var tr = $(this).css("transform");

  
  var values = tr.split('(')[1];
    values = values.split(')')[0];
    values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
  
  var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
angle = angle * - 1; 
console.log(angle);
$(this).css({ transform: 'rotate(' + angle + 'deg)'});
  
});

li{
  width: 50px; 
  height: 50px; 
  background: tomato; 
  margin-bottom: 10px;
  transform: rotate(120deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
</ul>

Answer 3

var aElement = $(".element").each(function(){});

aElement.on('click', function() {

    if ($(this).css("transform") == "rotate(120deg)") {
        $(this).css("transform", "rotate(-120deg");
    } else {
        $(this).css("transform", "rotate(120deg");
    }    
})