是否有 js 插件将矩阵参数转换为 css3 转换属性？

Question

假设我有 css3 转换样式：

img
{
   -webkit-transform:rotate(10deg) translate(100px,20px);
   -moz-transform:rotate(10deg) translate(100px,20px);
}

然后我使用 jquery 获取它的样式：

console.log($('#clone').css('-moz-transform'));

它只返回一个序列号：

matrix(0.984808, 0.173648, -0.173648, 0.984808, 95.0078px, 37.061px)

有没有js插件可以把矩阵数转为transform？或者转另一边？

Answer 1

你得到的数字是旋转和平移矩阵相乘的结果。

尽管对于您的情况，您可以通过在纸上进行数学运算并手动获得所需的公式来轻松解决，但对于增加术语数量而言，这将是一项繁重的任务（您需要了解原始变换的结构才能将它们反转）同样）。

这是一个可以帮助您的链接：

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

为什么不直接从 Javascript 代码中设置您需要的那些值，从而完全不需要从矩阵中获取它们呢？

Answer 2

做这个：

// Grab current rotation position
var  $img,
     position;

$img = $('img');

position = $img.css('-webkit-transform') || $img.css('-moz-transform') || $img.css('-ms-transform') || $img.css('-o-transform') || $img.css('transform');

position = position.split('(')[1].split(')')[0].split(',');

// Concert matrix to degrees value
position = Math.round(Math.atan2(position[1], position[0]) * (180/Math.PI));

看演示

了解更多

Answer 3

您可以将数字分解回各种组件。 有两种常用的技术可以做到这一点，简称为 QR 和 LU。

如果您将当前矩阵值提供给它，您可以执行以下操作：

function decompose(a, b, c, d, e, f, useLU) {

    var acos = Math.acos, // caching for readability below
        atan = Math.atan,
        sqrt = Math.sqrt,
        pi   = Math.PI,

        translate = {x: e, y: f},
        rotation  = 0,
        scale     = {x: 1, y: 1},
        skew      = {x: 0, y: 0},

        determ = a * d - b * c;   // get determinant

    if (useLU) {
        if (a) {
            skew =  {x: atan(c / a), y: atan(b / a)};
            scale = {x: a,           y: determ / a};
        }
        else if (b) {
            rotation = pi * 0.5;
            scale    = {x: b, y: determ / b};
            skew.x   = atan(d / b);
        }
        else { // a = b = 0
            scale  = {x: c, y: d};
            skew.x = pi * 0.25;
        }
    }
    else {
        // Apply the QR-like decomposition.
        if (a || b) {
            var r = sqrt(a*a + b*b);
            rotation = b > 0 ? acos(a / r) : -acos(a / r);
            scale    = {x: r, y: determ / r};
            skew.x   = atan((a*c + b*d) / (r*r));
        }
        else if (c || d) {
            var s = sqrt(c*c + d*d);
            rotation = pi * 0.5 - (d > 0 ? acos(-c / s) : -acos(c / s));
            scale    = {x: determ/s, y: s};
            skew.y   = atan((a*c + b*d) / (s*s));
        }
        else { // a = b = c = d = 0
            scale = {x:0, y:0};     // = invalid matrix
        }
    }

    return {
        scale    : scale,
        translate: translate,
        rotation : rotation,
        skew     : skew
    };
}

现在您可以使用对象及其值来设置旋转、缩放等。

有关更多详细信息，另请参阅我的transform-matrix-js和Decomposition of 2D transform-matrices 。

Answer 4

我找到了很好的解决方案，一个很好的 js 插件：

jQuery Transit - jQuery 的 CSS3 动画

非常好，可以获取或设置所有转换的属性