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

Posted 2023-05-08

【中文标题】如何使用 jquery 将 css 转换添加到当前转换值？

【英文标题】：How to add css transform to the current transform value Using jquery?

【发布时间】：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：***.com/questions/35429935/…

$(".div-1").css("transform","scale(-1,1) rotate("+yourDeg+"deg)"); 不工作？

应该57 是一个变量吗？

57 是可变的。将其视为 n 度。

试试@AntalGyuri 给出的评论，它应该可以工作。

【参考方案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 类，你会同时获得两种效果，有什么问题