Question

我需要使用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') ??

如何在不覆盖rotateX和旋转属性的情况下访问上述的translateZ属性？

由于

Answer 1

运算，

首先，I set up a Plunk可以实现您的要求。我是这样做的：

JS

$('document').ready(function () {
    $('#amount_to_rotate').keydown(function () {
        var el = $(".bottom_face"),
            amt = parseInt($(this).val());
        rotZ = {
            '-webkit-transform': 'rotateX(-9deg) rotate(-10deg) translateZ(' + amt + 'px)',
            '-moz-transform'   : 'rotateX(-9deg) rotate(-10deg) translateZ(' + amt + 'px)',
        }
        el.css(rotZ);
    }).keyup(function () {
        if ($(this).val().length == 0) {
            // Return to state given by CSS class
            $(".bottom_face").attr('style', ' ');
        }
    });
});

详细

input有一个keydown和keyup事件监听器。当用户输入一个值时，它会被添加到一个对象中，然后通过jQuery的style函数推送到元素的css属性。以这种方式使用对象允许我们设置静态值并传递变量 - 在本例中为amt - 用于translateZ值。

为了安全起见，由于我们正在处理用户输入，因此我们仅通过提取数字来对输入的val()进行处理：parseInt($(this).val());

另外值得注意的是，我必须修改您最初为变换指定的值，因为rotateX(-90deg)在其x轴上翻转元素，使其变得不可见。如果这是你想要的结果，你显然可以将它改回你认为合适的任何东西。

希望这会有所帮助。

Answer 2

以下是我尝试删除的一些代码：

$("#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") );
        }
    });
});

link to jsfiddle

Answer 3

为什么不直接添加更改的translateZ？

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

与

相同

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

编辑：Example of what I mean.

Answer 4

当您使用.css(-webkit-transform)时，它会返回matrix3d值，这使得查找原始值非常困难。

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)

您可以找到rotate值：source或demo;很遗憾，这不包括rotateX或rotateY。

最简单的方法是做这样的事情：

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

样本： http://jsfiddle.net/SLGdE/21/

希望这有帮助！

Answer 5

这是一个javascript解决方案：

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

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

<强> 2。替换要转换的值

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

第3。分配新的转型

myobject.style.transform = finalTransformation;

完成！

更改transformz属性

5 个答案:

JS

详细