Question

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

以下是我目前的代码：

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

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

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

})

非常感谢任何帮助。

Answer 1

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

希望这有帮助。

＆＃13;

$('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");
  }    
})

＆＃13;

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

＆＃13;

<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' />

＆＃13;

<强>更新

对于随机旋转，您可以生成随机布尔值并在其上创建条件，请查看下面的示例。

＆＃13;

$('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);
})

＆＃13;

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

＆＃13;

<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' />

＆＃13;

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");
    }    
})

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

3 个答案: