Increment jquery rotate deg based off previous value

Question

I seem to be finding conflicting results when searching online of how to do this. Using jquery(^3.4.1) all I want to do it increment the rotation of an element based off the previous rotation degrees. From what I have found I should be able to do:

$(element).css({'transform': 'rotate(+=10deg)'});

But no dice. However if I change it from rotate to left, it works as intended:

$(element).css({'left': '+=10'});

So what am I doing wrong? How do I increment the rotation like I do when I increment the left value?

Any advice?

you want to rotate it on a button click or window load? – Atul Rajput Apr 14 '20 at 15:00 — Atul Rajput, Apr 14 '20 at 15:00
I would want to rotate it on a click – user3612986 Apr 14 '20 at 15:27 — user3612986, Apr 14 '20 at 15:27

Atul Rajput · Answer 1 · 2020-04-14T15:33:10.630

Check the complete answer now, I was not aware that you need it on click,

var el = document.getElementById("thing");
    var st = window.getComputedStyle(el, null);
    var tr = st.getPropertyValue("transform") ||
        "FAIL";

    var values = tr.split('(')[1].split(')')[0].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));

    $('button').click(function(){
         angle += 10;
         $('#thing').css({'transform': `rotate(${angle}deg)`});
          $('p').text(('Rotate: ' + angle + 'deg'));
    });

#thing{display: inline-block; background-color: red; padding: 20px; margin-left: 50px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Rotate</button>
    <div id="thing" style="transform: rotate(45deg);">a</div>
    <p></p>

score 1 · Accepted Answer · answered Apr 14 '20 at 14:52

1

jQuery will increment values only if they are numbers like in your second case, you need to store a variable to increment the rotation because its essentially a string.

var rot = 0

...

rot+=10
$(element).css({'transform': `rotate(${rot}deg)`});

answered Apr 14 '20 at 14:52

Anurag Srivastava

14,077
4
33
43

Thanks for the comment and knowledge share. In that case I need to get the current value to increment it. How do I get it from the same element using jquery? – user3612986 Apr 14 '20 at 14:54
Its possible but fairly complicated, instead why don't you set the value always using a variable? It would be simpler – Anurag Srivastava Apr 14 '20 at 14:56
you can get the inline css value just using this var aa= $('.yourElement').css("transform"); or whatever property you want to get – Atul Rajput Apr 14 '20 at 14:58
I suppose you're right, just a little banjo stringed to do something so simple. – user3612986 Apr 14 '20 at 14:58
@Atul That returns a matrix, how do you easily get values from that? – Anurag Srivastava Apr 14 '20 at 15:01
you can get exact deg from the matrix, Posting the simple Code for you. – Atul Rajput Apr 14 '20 at 15:11
1

@Atul I'm aware you can get that, perhaps you didn't read all the comments in my answer and missed the words like *fairly complicated*, and *how do you easily* – Anurag Srivastava Apr 14 '20 at 15:13
my mistake if I miss that fairly complicated word, you are the best – Atul Rajput Apr 14 '20 at 15:16

Increment jquery rotate deg based off previous value

2 Answers2