javascript - 使用 JavaScript 从 matrix3d() 获取 3D CSS 旋转值

标签 javascript css matrix 3d css-transforms

我有一个元素 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 transforms 的方法.

最佳答案

好的,我知道了!

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

}

关于javascript - 使用 JavaScript 从 matrix3d() 获取 3D CSS 旋转值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34450835/

相关文章:

python - 3d内核与3d图像的矩阵乘法(例如RGB)如何精确地产生2d输出?

matlab - matlab矩阵中求子矩阵的一般方法

javascript - HTML5样板js结构

javascript - 悬停时使用两个按钮覆盖表格单元格

javascript - 通过html5地理位置获取天气

css - 溢出-x:隐藏在IE11中创建垂直滚动条

c - free() 无法在我的 c 代码中释放动态分配的内存

javascript - Lightbox2宽度自动设置

c# - 单击提交按钮后保持对话框(?)打开

javascript - 选择具有边框半径的 div 后删除框