如何增加旋转值

Question

问题

我想通过使用jquery将旋转值增加到div，我知道你可以通过height增加width和$("#div").css('height','+=200px')的值，但你不能这样做具有transform属性，因为它有很多值，如translate，rotate，scale和skew。

问题

如何将transform: rotate(30deg);的轮值30deg增加为60deg？

我不想使用css transform: rotate(60deg);或使用Jquery $("#mydiv").css('transform','rotate(60deg)')。

代码

// Any idea ?

#container{
  padding: 100px;
}
#mydiv{
  height: 200px;
  width: 200px;
  background: pink;
  transform: rotate(30deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="mydiv"></div>
</div>

提示

我尝试$("#mydiv").css('transform')它返回矩阵值。

Answer 1

您可以在rotate来电中添加css('transform'来完成此操作：

var value = 60;
$("#mydiv").css('transform', 'rotate(' + value + 'deg)');

更多demos with CSS3 transitions using jQuery here

Answer 2

解决方案

getRotationDegrees()函数将计算旋转度数并返回值。

function getRotationDegrees(obj) {
    var matrix = obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}


var rotate = getRotationDegrees($("#mydiv")) + 30;
$('#mydiv').css('transform', 'rotate('+rotate+'deg)')

#container{
  padding: 100px;
}
#mydiv{
  height: 200px;
  width: 200px;
  background: pink;
  transform: rotate(30deg);
}

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

<div id="container">
  <div id="mydiv"></div>
</div>

Answer 3

编辑：oops ...我刚看到你不想使用css，但我会在这里留下答案以供参考

这不是过渡的目的吗？

.my_div_class__closed
  { transform  : rotate(30deg)    ;
    transition : transform 200   ;
    /*                 You could substitute 200 (as in milliseconds) to 0     
                       if you want instantaneous change. 
    */
  }
.my_div_class__opened
  { transform  : rotate(60deg)    ;
  }

注意 ：示例中未使用的供应商前缀...如果您不了解供应商前缀，则将css代码段复制/粘贴到服务中例如autoprefixer ..并确保使用过滤器值：>0%