Есть ли плагин 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, который может превратить номер матрицы в преобразование? Или перейти на другую сторону?

Answer 1

Числа, которые вы получаете, являются результатом умножения матриц вращения и перевода.

Хотя для вашего случая вы могли бы легко справиться с математикой на бумаге и получить формулы, необходимые вам вручную, для увеличенияколичество терминов, это было бы утомительным заданием (вам нужно знать структуру исходных траформ, чтобы также обратить их).

Вот ссылка, которая поможет вам:

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

Почему бы просто не установить нужные вам значения из кода Javascript и, следовательно, вообще исключить необходимость их получения из матрицы?

Answer 2

Вы можете разложить числа обратно на различные компоненты.Для этого есть два распространенных метода, называемых 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
    };
}

Теперь вы можете использовать объект и егозначения для установки поворота, масштабирования и т. д.

См. также мои translation-matrix-js и Декомпозиция 2D-матриц преобразования для получения дополнительной информации.

Answer 3

Сделайте это:

// 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 4

Я нашел хорошее решение, хороший плагин js:

jQuery Transit - CSS3-анимации для jQuery

это очень хорошо, можно получить или установить все преобразованиянедвижимость