如何在CSS中组合转换？ [英] How to combine transforms in CSS?

问题描述

我有一个CSS动画，它使用变换相对于其当前位置四处移动。

CSS

fish {
    animation: fishanimation 4s ease-in-out infinite alternate;
}

@keyframes fishanimation {
  0% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(80px);
  }
}

现在我想使用javascript动态调整缩放和旋转，但这会被运行的CSS动画覆盖。转换未合并：(

Javascript

this.div.style.transform = "scale(0.4) rotate(45deg)";

是否可以将缩放和旋转应用于已经存在的转换？类似于：

element.transform = element.transform + "scale(0.4) rotate(34deg)";

编辑：

这不是问题的副本：how to combine css transforms。这个问题的要点是，某个元素可能已经有了我不想覆盖的转换。我想在不实际知道当前转换状态的情况下对其进行添加。

推荐答案

如评论所示，我建议您为此使用动画库，Velocity JS就是一个很好的例子。

如果不能选择建议的库，请继续阅读！

如果您希望在前面的转换之上执行多个这样的转换，则需要使用matrix值进行转换。矩阵让事情变得有点复杂。矩阵的参数顺序如下：-

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());

让我们使用从您提到的初始鱼动画开始的示例：-

fish {
    animation: fishanimation 4s ease-in-out infinite alternate;
}

@keyframes fishanimation {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 20);
  }

  100% {
    transform: matrix(1, 0, 0, 1, 0, 80);
  }
}

要在JavaScript中动态更改这一点，需要进行一些令人不快的字符串操作，并获取元素的Transform属性(这比您想象的要尴尬得多)。这里有一个您可能如何做到这一点的示例。

function getTransformValues(obj) {
    var transform = {
        scaleX: 1,
        skewX: 0,
        skewY: 0,
        scaleY: 1,
        translateX: 0,
        translateY: 0
    };

    var matrix = obj.css("-webkit-transform") ||
                 obj.css("-moz-transform")    ||
                 obj.css("-ms-transform")     ||
                 obj.css("-o-transform")      ||
                 obj.css("transform");

    if (matrix && matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        transform.scaleX = parseFloat(values[0]);
        transform.skewY = parseFloat(values[1]);
        transform.skewX = parseFloat(values[2]);
        transform.scaleY = parseFloat(values[3]);
        transform.translateX = parseFloat(values[4]);
        transform.translateY = parseFloat(values[5]);
    }

    return transform;
}

var values = getTransformValues($('#test'));
console.log(values);
// Object {scaleX: 1, skewX: 0, skewY: 0, scaleY: 2, translateX: 50, translateY: 40}

现在您有了这些值，您可以开始创建新矩阵，只需更改您想要的值，例如：-

var old = {
    scaleX: 1,
    skewX: 0,
    skewY: 0,
    scaleY: 2,
    translateX: 50,
    translateY: 40
};

$('#test').css('transform', 'matrix(' + old.scaleX + ', ' + old.skewY + ', ' + old.skewX + ', ' + old.scaleY + ', ' + old.translateX + ', ' + old.translateY + ')');

如果要开始操作旋转角度，事情会变得更加复杂。为避免将此答案弄得如此混乱，此部分问题的解决方案位于以下链接：Get element -moz-transform:rotate value in jQuery

希望您能明白为什么采用Velocity JS这样的库(至少在撰写本文时)是实现快速、轻松、干净和流畅跨浏览器动画的最佳方式。

这篇关于如何在CSS中组合转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！