在 jquery 中使用变换两次

Question

我用过

$(".container").css("transform", "translate3d(450px,0,0)")

在我的 jQuery 代码开头（第 10 行）。现在我必须为我的容器添加比例，所以我在我的代码中添加了以下行

$(".container").css("transform", "scale(1.5)")

但现在它重写了我之前的转换 wiz translate3d 我想在转换的同时添加比例。我该怎么做？

注意：第一次转换和第二次转换在完全不同的块中。所以

$(".container").css("transform", "translate3d(450px,0,0) scale(1.5)")

不会工作。

更新

我尝试将当前转换保存在一个变量中，然后添加新转换，如下所示

container.on({
    mouseenter: function () {
        var currentTransform = $(this).css("transform");
        $(this).css("transform", currentTransform + "scale(1.5)")
    }
    , mouseleave: function () {
        var currentTransform = $(this).css("transform");
        $(this).css("transform", currentTransform + "scale(1.0)")
    }
});

但现在在 mouseleave 规模上没有改变。它不会恢复到原来的形状。

一注

当我执行console.log(currentTransform)时，它以矩阵形式给出了转换信息。我仍然不知道如何删除此错误。请帮忙。

提前谢谢你。

Answer 1

这可能不是正确的方法，但对我来说效果很好。

events.on({
    mouseenter: function () {
        var currentTransform = $(this).css("transform");
        $(this).css("transform", currentTransform + "scale(1.5)")
    }
    , mouseleave: function () {
        var currentTransform = $(this).css("transform");
        var str = currentTransform.split(",")
        str[0] = "matrix(1"
        str[3] = "1"
        $(this).css("transform", str)
    }
});

在这个修改中，我将当前字符串以逗号分隔，然后修改了与比例相关的部分。

在 jquery 中使用变换两次

using transform twice in jquery

javascript

css

jquery

css-transforms