I have an element 3D transformed something like this:

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

Now I want to get these values via javascript. It's easy to get the 3D matrix:

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)

But is it possible to calculate CSS like values -30 and 35 with that matrix? I just found ways to do this for 2D transforms.

I have an element 3D transformed something like this:

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

Now I want to get these values via javascript. It's easy to get the 3D matrix:

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)

But is it possible to calculate CSS like values -30 and 35 with that matrix? I just found ways to do this for 2D transforms.

• javascript
• css
• matrix
• 3d
• css-transforms

• Even though the question is straight-forward, the answer seems to be very broad and plex for the scope of a single answer. You may find these links helpful - 1 - W3C Spec, 2 - Gist by jsfiii, 3 - Mathematics of 3d rotation. – Harry Commented Dec 25, 2015 at 6:26

1 Answer 1

Ok, got it!

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
    };

}