How to rotate elements either forward or back from current state

Question

Say I have three elements. When user clicks on any of the elements, that element needs to rotate either +120 degrees or -120 degrees every time it's clicked (direction selected randomly with no particular order). So if it's current rotation is at 120, when it's click again, it rotates another 120 degrees. I need it to alternate between plus or minus rotation at random. So it can either rotate forward or back...

Here is the code I currently have:

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

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

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

})

Any help is greatly appreciated.


Show source
| javascript   | jquery   | css3   | transform   2016-07-16 00:07 3 Answers

Answers ( 3 )

  1. 2016-07-16 00:07
    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");
        }    
    })
    
  2. 2016-07-16 00:07

    I stand corrected. $(this).css('transform') doesn't give us the numeric angle. Instead it gives us something like this matrix(-0.5, 0.866025, -0.866025, -0.5, 0, 0). Remember you need to do this for the rest of the browser prefixes.

    Original Source: 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>

  3. 2016-07-16 00:07

    I suggest to use data-* attributes to check if the clicked element is rotated of not using (1 and 0) then do the inversion, check the example below.

    Hope this helps.

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

    Update

    For random rotation you could generate a random boolean and make a condition on it, check the example below.

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

◀ Go back