根据先前值增加 jquery 旋转角度

Question

在网上搜索如何执行此操作时，我似乎发现了相互矛盾的结果。使用 jquery(^3.4.1) 我想做的就是根据先前的旋转度数增加元素的旋转。根据我的发现，我应该能够做到：

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

但是没有骰子。但是，如果我将它从旋转更改为向左，它会按预期工作：

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

那我做错了什么？如何像增加左值时那样增加旋转？

有什么建议吗？

Answer 1

jQuery 只有当它们是数字时才会增加值，就像在第二种情况下一样，您需要存储一个变量来增加旋转，因为它本质上是一个字符串。

var rot = 0

...

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

Answer 2

现在检查完整的答案，我不知道你需要点击它，

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>

根据先前值增加 jquery 旋转角度

Increment jquery rotate deg based off previous value

javascript

jquery

css-transforms