如何使用 jquery 将 css 转换添加到当前转换值？答案

【问题标题】：How to add css transform to the current transform value Using jquery?如何使用 jquery 将 css 转换添加到当前转换值？
【发布时间】：2017-05-12 09:27:42
【问题描述】：

目前我有一个转换值为rotate(57deg)的类，当警报时

$(".div-1").css("transform") 给出矩阵值。

<style> 
 .div-1{
     transform: rotate(57deg);
     }                 
</style>   
<div class="div-1">Test</div>

我需要将scale(-1, 1) 添加到现有的变换值使用 jQuery

。所以 .div-1 变换值变成div-1 { transform: scale(-1, 1) rotate(57deg); } 怎么办？这里 57 只是一个数字，它会一直变化。所以我需要将scale( -1 , 1) 添加到当前变换值。请帮忙。

【问题讨论】：

创建一个包含刻度的类，然后将类动态添加到 div：stackoverflow.com/questions/35429935/…
$(".div-1").css("transform","scale(-1,1) rotate("+yourDeg+"deg)"); 不工作？
应该57 是一个变量吗？
57 是可变的。将其视为 n 度。
试试@AntalGyuri 给出的评论，它应该可以工作。

标签： javascript jquery jquery-ui

【解决方案1】：

你可以这样做：

var css = $('.div-1').css("transform");
css = css+" scale(-1,1)";
$('.div-1').css('transform',css);

【讨论】：

是的，这是有效的。我从没想过事情这么简单。当看到矩阵值时，我没有尝试任何事情，我只是问而没有尝试。谢谢你的朋友。

【解决方案2】：

<style>
    div {
        -ms-transform: rotate(57deg); // IE 9  
        -webkit-transform: rotate(57deg); // Chrome, Safari, Opera  
        transform: rotate(57deg);
    }
</style>

【讨论】：

【解决方案3】：

另一种解决方案是创建两个类

<style> 
 .div-1{
     transform: rotate(57deg);
     }    
  .div-2{
     transform: scale(-1, 1) rotate(57deg);
     }             
</style>   
<div class="div-1">Test</div>

然后在 jquery 中执行以下操作：

if(condition == true){
$(".div-1").addClass("div-1");
$(".div-1").removeClass("div-2");
} else {
$(".div-1").addClass("div-2");
$(".div-1").removeClass("div-1");
}

【讨论】：

这不是正确答案的朋友。因为这里有一次我要么得到缩放效果，要么得到旋转效果。但正如我解释的那样，我一次需要两者 .div-1 { transform: scale(-1, 1) rotate(57deg); }
一旦应用了 div-2 类，你会同时获得两种效果，有什么问题