检测 CSS 矩阵支持答案

【问题标题】：Detect CSS Matrix support检测 CSS 矩阵支持
【发布时间】：2012-04-16 23:28:31
【问题描述】：

我使用 Modernizr 进行特征检测，使用 TransformJS 为 CSS3D 属性设置动画。 TransformJS 使用 CSS 矩阵来设置平移、缩放和旋转属性的样式，即使在 IE 中也可以正常工作，因为它通过 filter 属性支持矩阵转换。

我的问题是 Opera 仅支持 CSS 矩阵，因为 Opera Presto 2.5 现在似乎处于 alpha/beta 版本。有没有办法检测浏览器是否能够进行 CSS 矩阵转换？

任何帮助将不胜感激。 :)

编辑：好吧，我错了：） Opera 确实支持 CSS 矩阵，但值必须是无单位的。但是测试它仍然会很有趣。

【问题讨论】：

标签： css matrix css-transforms browser-feature-detection

【解决方案1】：

是的，对于矩阵类型，您需要使用不带单位的值。无论如何，您可以像这样检查支持：创建一个元素，将您的属性 (transform:matrix(...)) 交给他，然后查看该元素的样式。如果他有你的财产，说明浏览器支持。

supportProperty = function(propertyName,propertyValue){
    let elem = document.createElement('div');
    elem.style.cssText = propertyName + ':' + propertyValue;
    return elem.style[propertyName].match(propertyValue) ? true : false;
};
supportProperty('transform','matrix(1,0,0,1,0,0)');

【讨论】：