Question

我不确定这是否可行，因为应用顺序旋转会影响旋转矩阵的形式;但是我想从CSS matrix3d变换得到欧拉角。我发现缺乏关于matrix3d格式以及如何应用转换的文档。到目前为止，这是我的代码：

getRotation: function (el) {
    var matrix = Esprit.getTransform(el);
    // 2d matrix
    if (matrix.length === 6) {
        return {
            x: 0,
            y: 0,
            z: Math.round(Math.atan2(matrix[1], matrix[0]) * (180 / Math.PI))
        };
    }
    // 3d matrix
    else {
        // incorrect calculations
        // only work for a single rotation
        // return {
        //      x: Math.round(Math.atan2(matrix[6], matrix[5]) * (180/Math.PI)),
        //      y: Math.round(Math.atan2(-matrix[2], matrix[0]) * (180/Math.PI)),
        //      z: Math.round(Math.atan2(matrix[1], matrix[0]) * (180/Math.PI))
        // };

        // convert from string to number
        // for (var i = 0, len = matrix.length; i < len; i++) {
        //      matrix[i] = Number(matrix[i]);
        // }

        // gimball lock for positive 90 degrees
        if (matrix[2] === 1) {
            return {
                x: Esprit.toDegrees(Math.atan2(matrix[0], matrix[1])),
                y: Esprit.toDegrees(Math.PI / 2),
                z: 0
            }
        }
        // gimball lock for negative 90 degrees
        else if (matrix[2] === -1) {
            return {
                x: Esprit.toDegrees(-Math.atan2(matrix[0], matrix[1])),
                y: Esprit.toDegrees(-Math.PI / 2),
                z: 0
            }
        }
        // no gimball lock
        else {
            return {
                x: Esprit.toDegrees(Math.atan2(matrix[6], matrix[10])),
                y: Esprit.toDegrees(Math.asin(matrix[2])),
                z: Esprit.toDegrees(Math.atan2(-matrix[1], matrix[0]))
            }
        }

    }
},

getTransform: function (el) {
    var transform = getComputedStyle(el).webkitTransform;
    return transform !== 'none' ? transform.split('(')[1].split(')')[0].split(',') : Esprit.create3dMatrix();
},

toDegrees: function (radians) {
    return Math.round(radians * 180 / Math.PI);
}

非常感谢任何帮助或想法。谢谢！

Answer 1

John Schulz（@jfsiii）发布了这个回复：

https://gist.github.com/4119165

将CSS Matrix3d变换转换为欧拉角

1 个答案: