Javascript 更改transformz属性

我需要使用jquery更改元素的transformz。我有一个带有css的div：

.bottom_face {
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(487px);
  -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(347px);
 }

当用户更改表单上的属性时，我希望更改translateZ值以添加他们输入的金额：

$('.bottom_face ').css('-webkit-transform') ??

如何访问上面的translateZ属性而不覆盖rotateX和rotate属性

---

谢谢

为什么不把更改后的translateZ追加

.bottom_face {
    transform: translateZ(487px);
}

结果与

.bottom_face {
    transform: translateZ(487px) translateZ(-50px) translateZ(50px);
}

编辑：

当您使用

.css（-webkit transform）

时，它将返回一个值，这使得很难找到原始值

matrix3d

示例：

matrix3d(-1, 0.00000000000000012095693648649962, -0.000000000000000019157696688784726, 0, -0.00000000000000012246467991473532, -0.9876883405951378, 0.15643446504023087, 0, 0, 0.15643446504023087, 0.9876883405951378, 0, 0, 76.18358447459244, 481.0042218698321, 1)

您可以找到

旋转

值：或；不幸的是，这不包括

rotateX

或

rotateY

最简单的方法是这样做：

var _translate = '30px';
$('.bottom_face').css('-webkit-transform', 'rotateX(-90deg) rotate(180deg) translateZ(' + _translate + ')');

演示：

希望这有帮助

Op

首先，这实现了你的要求。我是这样做的：

JS 细节

input

有一个

keydown

和

keydup

事件侦听器。当用户输入一个值时，它被添加到一个对象中，然后通过jQuery的

css

函数推送到元素的

style

属性。以这种方式使用对象允许我们设置静态值，并在本例中为

translateZ

值传递变量

amt

为了安全起见，因为我们处理的是用户输入，所以我们只通过拉出数字来调整输入的

val（）

：

parseInt（$（this.val（））

同样值得注意的是，我必须修改最初为变换指定的值，即
rotateX（-90deg）
以不可见的方式翻转元素的x轴。如果这是你想要的结果，你显然可以把它改回你认为合适的状态

希望这有帮助
 以下是我试图精简到最低限度的一些代码：

$("#add").click(function() {
    var z = $("#z").val();
    $(".bottom-face").each(function() {
        var $c = $(this);
        var css;
        if (css = $c.css("-webkit-transform")) {    // assignment
            $c.css("-webkit-transform",
               $c.css("-webkit-transform") + " translateZ(" + z + "px)"
            );
            //console.log( $c.css("-webkit-transform") );
        }
    });
});

这里有一个javascript解决方案：

1。将对象的转换属性转换为字符串

var currentTransformation = String(myobject.style.transform);

2。替换要转换的值

var finalTransformation = currentTransformation.replace("translateZ(100px)", "translateZ(YOURVALUEpx)");

3。分配新的转换

myobject.style.transform = finalTransformation;

完成了
 我需要动态地在客户端执行此操作，以更改cssI。我不认为我了解问题所在。添加了一个示例来说明我对jQuery的看法（使用rotate而不是translateZ，但这不会改变任何事情），您不必定义
-webkit-
前缀
myobject.style.transform = finalTransformation;