Question

我尝试应用一些动态比例和翻译 css属性这样的事情

var scale="scale(2,2)";
var translate="translate(20,20)";
var prop=scale+" "+translate;
$(this).css({
            "transform":prop
             });

但这不起作用。我甚至试过这样的事情

 prop="'"+scale+" "+translate+"'";
$(this).css({"transform":prop});

即使这样也行不通。请帮忙解决这个问题。

Answer 1

正如Harry所说，你在你的translate财产上拥有测量单位。

见下文：

var scale="scale(2,2)";
var translate="translate(20px,20px)";
var prop=scale+" "+translate;
$(this).css({
   "transform":prop
});

更简单的替代方法是改为进行类更改，并将transform样式指定给新类。

像这样：

$(this).addClass('transform-me');

和CSS

.transform-me {
  transform:translate(20px, 20px) scale(2,2);
}

以这种方式实现完全相同的结果，但它确实简化了发生错误的故障排除（无论是CSS还是导致问题的jQuery）。

Answer 2

我想添加另一种使用CSS矩阵的方法，并使用jquery对其进行操作。调整图像的强大方法。在下面的示例中，我们设置变量以保存数据并将图像左移1个像素。

var prior = parseInt($(this).css('transform').split(',')[4]) || 0;
lastX -= 1;
args = [lastScale, 0, 0, lastScale, lastX, lastY]
$(this).css('transform', 'matrix(' + args.join(",") + ')');

如何使用Jquery应用多个css转换属性

2 个答案: