JavaScript从常规CSS获取矩阵变换并将matrix2D转换为matrix3D

Question

我需要从像这样的常规CSS变换中获得矩阵变换：rotateX(10deg) rotateZ(10deg)。

我知道有一个针对WebKit（WebKitCSSMatrix）的existring解决方案，但对于Firefox或IE没有类似的东西......

所以，我尝试通过将变换设置为不可见（不在DOM中）并使用getComputedStyle获取矩阵来获取矩阵，但是如果元素被隐藏或从文档中分离，则此方法不返回任何内容。

是否有一个很好的教程可以将值转换为Matrix？

那么，如何将2D矩阵转换为3D？从6到16个值......

Answer 1

你可以自己计算矩阵。本页介绍了如何将旋转描述为 2D矩阵：http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html

进行轮换，这将是：

可以通过这些属性访问矩阵值。最后一行不需要修改为2d。在css使用中初始化矩阵：matrix(a,b,c,d,e,f)

3D矩阵你可以在这里找到一个很好的介绍：http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/

阅读有关如何手动设置矩阵的信息：http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

在这两种情况下，如果要应用多个转换，则必须将多个矩阵相乘。有关如何执行此操作的信息，请访问：http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

Answer 2

  

注意： getComputedStyle 方法仅适用于附加到文档中的元素

让我们从一个函数开始，它使一个隐藏元素并将其附加到您的文档中：

var make_test_el = 
    function () {
        var el = document.createElement("div");

        // some browsers doesn't add transform styles if display is inline
        el.style.display = "block";

        // to be sure your element won't be shown 
        el.style.width = "0px";
        el.style.height = "0px";
        el.style.margin = "0px";
        el.style.padding = "0px";
        el.style.overflow = "hidden";

        document.body.appendChild(el);
        return el;
    }

然后通过以下代码使用它：

var value = 'rotateX(10deg) rotateZ(10deg)'; // your readable value for transformation

var elem = make_test_el();

elem.style.transform = value;

// take your result and alert it 
var result = window.getComputedStyle(elem,null).transform;
alert(result);

//then remove appended element
elem.parentNode.removeChild(elem);

演示：http://jsfiddle.net/hbh7ypc9/1/

您可能会看到 matrix3d(...) 或 matrix(...) 的结果 这取决于浏览器的RenderEngine 和给定值
例如：
  IE10 将始终为您提供 matrix3d(...)
 但对于 chrome 和 opera 取决于给定值

但我不知道将2D矩阵转换为3D矩阵
这个问题我也是 实际上，矩阵值很难理解 祝你好运......