Css 如何对webkit matrix3d转换进行反向工程

我有一个立方体元素在三维空间中旋转和平移

我想找出在给定时间这个变换的旋转部分。这可能吗

我有：

var cube = document.getElementById("cube");
var transform = getComputedStyle(cube).webkitTransform;

//the value of transform is:
// matrix3d(-1, 0, 0.00000000000000012246467991473532, 0, 
//           0, 1, 0, 0, 
//          -0.00000000000000012246467991473532, 0, -1, 0, 
//           0, 0, 0, 1)

---

帮助？：-）

如果对象仅围绕Y旋转，则是的，旋转很容易计算-它是元素1,3的or 3,3或arsin（元素3,1）或Arcin（元素1,3）。在您的具体示例中，它大约是180度。如果旋转不仅仅是y轴，那么你必须开始跟踪之前的旋转，它会变得更混乱

您的翻译将只是输出矩阵的底行，在本例中为0,0,0

参见上的示例

---

您可以使用“新WebKitCSSMatrix”功能检索转换信息。例如：

var matrix = new WebKitCSSMatrix($('#element').css('-webkit-transform'));
var translateZ = matrix.m43;

矩阵的每一部分都在这里解释： 对于具有math mess的3d矩阵，您可以检索更复杂的特性，如rotationX：

var rotationX = Math.acos(matrix.a) * (180/Math.PI);
var rotationY = Math.asin(matrix.b) * (180/Math.PI);

---

给定函数确定给定DOM元素跨浏览器的

旋转*

、

变换*

和

缩放

如果你想要更多的东西，或者发现数学中的错误，这是一个关于

在下列浏览器上测试：

---

获取转换的y值？您可能想看看translate（）。它将矩阵形式转换为值。这里的更多内容可能我不懂，但我一直在使用matrix3d，其他人的代码正在为我应用转换。我只是想看看我是否能回到我误解的方向。我想你想利用转换的价值做点什么。不要理会这个评论。我在这个链接上找到了一个函数。阅读上面的链接，得到哪个值属于Y，并使用他们使用函数的方式得到Y度。如果你还没有得到答案，我会在今天晚些时候读这篇文章。对不起，我帮不上忙。在我上班的路上。：）一个数学能力更好的人可以扩展函数的可能性。一旦我们有了矩阵，我们就可以对很多事情进行逆向工程//Todo:我很快就会处理一篇好文章：好吧，这是一个有7年历史的线程。您可以使用archive.org上的wayback机器查看其缓存版本。以下是wayback machine的2011版本：

var reverseEngineerTransform3d = function (domElement, parameterName) {

        parameterName = parameterName.toLowerCase();

        var computedStyle = window.getComputedStyle(domElement),
            matrixStyle = computedStyle.transform || computedStyle.WebkitTransform || computedStyle.MozTransform || computedStyle.msTransform || computedStyle.OTransform;

        if (matrixStyle) {
            matrixStyle = matrixStyle.trim();
        }

        if (matrixStyle === 'none') {
            if (parameterName.indexOf('rotate') === 0) {
                return '0deg';
            } else if (parameterName.indexOf('translate') === 0) {
                return '0px';
            } else if (parameterName === 'scale') {
                return 1;
            } else {
                throw "Unsupported 3D parameter " + parameterName;
            }
        }

        else if (!matrixStyle || matrixStyle.substr(0, 9) !== 'matrix3d(') {
            //return something or die ?????
            throw "Something is wrong with 3D transform style. Probably no style applied at all OR unknown CSS3 vendor OR unknown/unsupported 3D matrix representation string OR CSS3 3D transform is not fully supported in this browser";
        }

        var matrix = window.WebKitCSSMatrix && (new WebKitCSSMatrix(matrixStyle)) ||
                window.MozCSSMatrix && (new MozCSSMatrix(matrixStyle)) ||
                window.MsCSSMatrix && (new MsCSSMatrix(matrixStyle)) ||
                window.OCSSMatrix && (new OCSSMatrix(matrixStyle)) ||
                window.CSSMatrix && (new CSSMatrix(matrixStyle)); // sorry 4 copy-paste my friends

        if (!matrix || isNaN(matrix.a) || isNaN(matrix.b) || isNaN(matrix.c) || isNaN(matrix.m41) || isNaN(matrix.m42) || isNaN(matrix.m43) || isNaN(matrix.m11)) {
            throw "Could not catch CSSMatrix constructor for current browser, OR the constructor has returned a non-standard matrix object (need .a, .b, .c and mXX numerical properties to work)";
        }


        // todo: giving a parameters array (and returning an array) is a good idea, or we could return everything if no parameters given

        switch (parameterName) {

            case 'rotatey':  // in degrees
                return Math.acos(matrix.m11)*180/Math.PI * (matrix.m13 > 0 ? -1 : 1) + 'deg';

            case 'rotatex':  // in degrees
                return Math.asin(matrix.m22)*180/Math.PI + 'deg';

            case 'rotatez':  // in degrees
                throw "TODO: Sorry, math people. I really need help here! Please implement this case for me. This will help you: http://9elements.com/html5demos/matrix3d/";

            case 'translatex': // in pixels
                return matrix.m41 + 'px';

            case 'translatey': // in pixels
                return matrix.m42 + 'px';

            case 'translatez': // in pixels
                return matrix.m43 + 'px';

            case 'scale': // no units
                if (matrix.m11 === matrix.m22 && matrix.m22 === matrix.m33) {
                    return matrix.m11;
                } else {
                    throw "I'm not so smart to calculate scale from this matrix";
                }

           // todo: anything else? skew ????

            default:
                throw "This function accepts 3d-parameter name (case-insensitive string) as the second argument. Currently supported: 'rotate[xyz]', 'translate[xyz]', 'scale'. This parameter is unsupported: " + parameterName;
        }
    };