我需要从像这样的常规 CSS 变换中获取矩阵变换：rotateX(10deg) rotateZ(10deg)。
我知道 WebKit (WebKitCSSMatrix) 有一个现有的解决方案，但对于 Firefox 或 IE 没有类似的解决方案...
因此，我尝试通过将转换设置为不可见（不在 DOM 中）并使用 getComputedStyle 获取矩阵来获取矩阵，但如果元素被隐藏或从文档中分离，此方法不会返回任何内容。
有没有很好的将值转换为矩阵的教程？
那么，如何将 2D 矩阵转换为 3D ？从 6 到 16 个值...
【问题讨论】：
标签： javascript css matrix
注意：
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(...)
这取决于浏览器的渲染引擎和给定值
例如：
IE10 将始终为您提供 matrix3d(...)
但是对于 chrome 和 opera 取决于 given value
但我不知道将 2D 矩阵转换为 3D 矩阵
我也是这个问题
实际上矩阵值真的很难理解
祝你好运……
【讨论】：
您可以自己计算矩阵。本页解释了如何将旋转描述为 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/
【讨论】：