Javascript 使用jquery操作单个CSS转换效果

如果我的元素定义了多个CSS变换效果，如下所示：

transform: translate(400px, 40px) scale(1);

但是我只想操纵其中一个，比如在不影响当前scale值的情况下更改其平移坐标，我可以用JQuery以一种不会强迫我解析整个字符串的方式来实现这一点吗

类似的事情已经可以在“class”属性中完成了——我可以使用hasClass、addClass、removeClass，JQuery将为我进行解析

---

我可以对TransformCSS属性执行类似的操作吗？

更好的方法是混合使用

CSS

和

JQuery

。我创建了一个只使用

CSS

和

JavaScript

的脚本，在那里你可以看到使用类是不够的。 我建议您使用

JQuery

这样做，因为这样可以让您做更复杂的事情。 只有

CSS

不足以产生复杂的效果，只有

JQuery

编码效率不高

HTML:

JS:

---

如果您已经在使用jQuery，那么您最好使用默认情况下jQuery附带的大量动画功能，而忘记css属性本身

也就是说，如果您一心想控制各个变换属性，那么最好使用嵌套元素，其中每个元素都应用了一个变换规则：

函数translateDiv（）{
var translateDiv=document.getElementById（'translate'）；
if（translateDiv.classList.contains（'translate'））{
translateDiv.classList.remove（'translate'）；
}否则{
translateDiv.classList.add（'translate'）；
}
}
函数rotateDiv（）{
var rotateDiv=document.getElementById（'rotate'）；
if（rotateDiv.classList.contains（'rotate'））{
rotateDiv.classList.remove（'rotate'）；
}否则{
rotateDiv.classList.add（'rotate'）；
}
}
函数scaleDiv（）{
var scaleDiv=document.getElementById（'scale'）；
if（scaleDiv.classList.contains（'scale'））{
scaleDiv.classList.remove（'scale'）；
}否则{
scaleDiv.classList.add（'scale'）；
}
}

div{
过渡：均为0.3秒；
}
#挡块{
宽度：200px；
高度：150像素；
边界半径：15px；
背景色：#FBCE0C；
指针事件：无；
}
.天平{
变换：比例（0.5）；
}
.轮换{
变换：旋转（45度）；
}
.翻译{
转换：转换（120px，200px）；
}
#基站{
z指数：5；
}

翻译
旋转
规模

也许您更喜欢将“静态”转换移动到一个类中，然后使用

.css（'transform'，''）自由修改整个转换

是的，这就是我最终要做的-理想情况下，我不想将“scale”值存储在DOM之外的其他地方，但遗憾的是，这是最实用的方法。嗨Xdevelop，谢谢你的想法，但这并不是我所需要的-参数化CSS属性值的能力是至关重要的，拥有一组预先设定的值是不会削减它的，不管它有多大。

<div id="d1"></div>

div{
    position:relative;
    float:left;
    height:100px;
    width:100px;
    background-color:red;
}

.scale{
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
}

.translate{
    -webkit-transform: translate(100px,0); /* Chrome, Safari, Opera */
     transform: translate(100px,0);
}

.scale.translate{
    -webkit-transform: translate(50px,0) scale(0.5); /* Chrome, Safari, Opera */
     transform: translate(50px,0) scale(0.5);
}

var d1 = document.getElementById("d1");
d1.setAttribute("class","scale");
setTimeout(function(){
    d1.setAttribute("class","translate");
},3000);
setTimeout(function(){
    d1.setAttribute("class","translate scale");
},6000);