如何將css變換添加到當前變換值使用jquery？

Question

目前我有一個變換值為rotate(57deg) ，當rotate(57deg)警報時

$(".div-1").css("transform")它給出矩陣值。

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

我需要使用Jquery將scale(-1, 1)添加到現有的轉換值

。 所以.div-1變換值變為div-1 { transform: scale(-1, 1) rotate(57deg); } div-1 { transform: scale(-1, 1) rotate(57deg); }如何做到這一點？ 這里57只是一個數字，它將永遠改變。 所以我需要的是將scale( -1 , 1)到當前變換值。 請幫忙 。

Answer 1

你可以這樣做：

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

Answer 2

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

Answer 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");
}