4

我需要使用 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 和 rotate 属性的情况下访问上述 translateZ属性？

谢谢

4

5 回答 5

1

这是我试图精简到最低限度的一些代码：

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

以及jsfiddle的链接

于 2013-03-14T08:52:46.867 回答
1

操作，

首先，我设置了一个可以实现您所要求的 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事件监听器。当用户输入一个值时，它被添加到一个对象中，然后style通过 jQuery 的css函数推送到元素的属性中。以这种方式使用对象允许我们设置静态值并为该值传递一个变量（在这种情况下amt）translateZ。

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

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

希望这可以帮助。

于 2013-03-13T23:18:59.420 回答
0

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

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

结果与

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

编辑：我的意思的例子。

于 2013-03-08T17:17:10.993 回答
0

当你使用.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；不幸的是，这不包括rotateXor rotateY。

解决此问题的最简单方法是执行以下操作：

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

演示：http: //jsfiddle.net/SLGdE/21/

希望这可以帮助！

于 2013-03-08T21:47:01.920 回答
0

这是一个javascript解决方案：

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

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

2.替换你想要转换的值

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

3.分配新的转换

myobject.style.transform = finalTransformation;

完毕！

于 2016-11-13T15:22:56.403 回答