Javascript 是否向元素上已存在的当前变换添加变换值？

假设我有一个

div

，它动态添加了

translateX

和

translateY

值

<div class="object child0" 
     style="-webkit-transform: translateX(873.5px) translateY(256px); 
            width: 50px; height: 50px;">

我想将

rotateY（20deg）

添加到当前变换，但通过

element.style.webkitttransform=“rotateX（20deg）”

会丢失其他值

---

有没有一种方法可以添加

rotateY

而不丢失

translateX

和

translateY

转换？

您可以使用

+=

操作符将

rotateX（20度）

附加到现有的转换中

el.style.webkitTransform += "rotateX(20deg)";

注意：我在下面的代码片段中使用了不同的转换来获得视觉效果，但方法是相同的

window.onload=function（）{
var el=document.getElementsByTagName（“div”）[0]；
el.style.WebKittTransform+=“旋转（20度）”；
log（el.style.webkitTransform）；
document.getElementById（“changeDeg”）.onclick=changeDeg；//事件处理程序
}
函数changeDeg（）{
var el=document.getElementsByTagName（“div”）[0]；
var re=/（rotateZ）（\（.*（：deg\））/g；//匹配rotateZ（…deg）的正则表达式
var newDeg=40；
if（el.style.webkittTransform.match（re.length）！=-1）{
el.style.webkitttransform=el.style.webkitttransform.replace（re，$1（'+newDeg+'deg）；//$1是第一个捕获组，即“rotateZ”
}
log（el.style.webkitTransform）；
}

div{
背景：红色；
边缘底部：20px；
}

更改旋转

这很有效，谢谢。但如果我想再次更改旋转，它将继续附加rotateZ（someValue）。我希望能够自由添加变换并修改它们的值。如果不检查此类型的值是否已存在，是否就无法安全地添加转换或修改其值？您不能在CSS（或内联样式）中定义两个单独的

transform

属性，因为后者将替换早期的属性。使用JS或jQuery实现的唯一方法是获取现有字符串并追加（或根据需要删除现有值）。@nuway:我知道您可能能够自己找出正则表达式，但我已经在代码段中添加了一个示例供您参考。