Вземете 3D CSS ротационна стойност от matrix3d() с JavaScript

Имам 3D елемент, трансформиран нещо подобно:

.foo {
  transform: rotateX(-30deg) rotateY(35deg);
}

Сега искам да получа тези стойности чрез javascript. Лесно е да получите 3D матрицата:

var matrix = $('.foo').css('transform');
// return:
// matrix3d(0.819152, -0.286788, -0.496732, 0, 0, 0.866025, -0.5, 0, 0.573576, 0.409576, 0.709406, 0, 0, 0, 0, 1)

Но възможно ли е да се изчислят CSS като стойности -30 и 35 с тази матрица? Току-що намерих начини да направя това за 2D трансформации .


javascript css css-transforms 3d matrix
person Philipp Kühn    schedule 24.12.2015    source източник
comment
Въпреки че въпросът е ясен, отговорът изглежда много широк и сложен за обхвата на един отговор. Може да намерите тези връзки за полезни - 1 - W3C спецификация, 2 - Същност от jsfiii, 3 - Математика на 3d ротация.   -  person Harry    schedule 25.12.2015

Отговори (1)


arrow_upward
3
arrow_downward

Добре, разбрах!

var _getTransform = function($element) {

    var matrix = $element.css('transform'),
        rotateX = 0,
        rotateY = 0,
        rotateZ = 0;

    if (matrix !== 'none') {

        // do some magic
        var values = matrix.split('(')[1].split(')')[0].split(','),
            pi = Math.PI,
            sinB = parseFloat(values[8]),
            b = Math.round(Math.asin(sinB) * 180 / pi),
            cosB = Math.cos(b * pi / 180),
            matrixVal10 = parseFloat(values[9]),
            a = Math.round(Math.asin(-matrixVal10 / cosB) * 180 / pi),
            matrixVal1 = parseFloat(values[0]),
            c = Math.round(Math.acos(matrixVal1 / cosB) * 180 / pi);

        rotateX = a;
        rotateY = b;
        rotateZ = c;

    }

    return {
        rotateX: rotateX,
        rotateY: rotateY,
        rotateZ: rotateZ
    };

}
person Philipp Kühn    schedule 28.12.2015
comment
Хей, благодаря за функцията. Все пак имам въпрос: върнатите стойности очевидно са между 0 и 90 градуса. Как можем да получим стойност, която е от 0 до 360? - person Andrea Silvestri; 28.10.2016
comment
за 0 до 360: c = Math.round(Math.atan2(values[1], values[0]) * 180 / pi); if (c < 0) { c = 360 + c; } - person devdev_dev; 22.12.2019