使用JavaScript或jQuery检测CSS transform 2D是否可用

我正在我的网站上显示一个元素，我以-90度旋转 但是如果浏览器不支持CSS转换元素 看起来位置不对，不是很好。 现在我想用JavaScript或jQuery进行检测（这无关紧要） 如果是jQ或JS，因为我在我的网站上使用/加载了jQ）是否支持通过CSS进行轮换

---

我知道，但就这一点而言，我不想包括整个图书馆（并降低网站速度负载）。

只需从Modernizer中提取您需要的内容即可

首先，我们需要testProps函数

   /**
     * testProps is a generic CSS / DOM property test; if a browser supports
     *   a certain property, it won't return undefined for it.
     *   A supported CSS property returns empty string when its not yet set.
     */
    function testProps( props, prefixed ) {
        for ( var i in props ) {
            if ( mStyle[ props[i] ] !== undefined ) {
                return prefixed == 'pfx' ? props[i] : true;
            }
        }
        return false;
    }

然后运行cstransform测试

var tests = [];
 tests['csstransforms'] = function() {
        return !!testProps(['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform']);
    };

---

如果tests['cstransforms']为true，则该功能可用

这是一个非常简单的问题。它不再是无限循环

function getSupportedTransform() {
    var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
    for(var i = 0; i < prefixes.length; i++) {
        if(document.createElement('div').style[prefixes[i]] !== undefined) {
            return prefixes[i];
        }
    }
    return false;
}

函数getSupportedTransform（）{
var前缀='transform webkitttransform mozortransform msTransform'.split（''）；
for（var i=0；i

以下是我用来检测是否支持CSS3转换的代码：

var div = document.createElement('div');
div.setAttribute('style', 'transition:top 1s ease;-webkit-transition:top 1s ease;-moz-transition:top 1s ease;-o-transition:top 1s ease;');
document.body.appendChild(div);
var cssTransitionsSupported = !!(div.style.transition || div.style.webkitTransition || div.style.MozTransition || div.style.OTransitionDuration);

div.parentNode.removeChild(div);
div = null;

---

我有意不寻求微软的支持，因为微软还没有提供支持CSS3转换的浏览器，我也不希望我的代码自动支持我将来还没有测试过的实现。

这里有一个基于Liam答案的函数。它将返回第一个受支持前缀的名称，如果不支持任何前缀，则返回

false

function getSupportedTransform() {
    var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
    var div = document.createElement('div');
    for(var i = 0; i < prefixes.length; i++) {
        if(div && div.style[prefixes[i]] !== undefined) {
            return prefixes[i];
        }
    }
    return false;
}

函数getSupportedTransform（）{
var前缀='transform webkitttransform mozortransform msTransform'.split（''）；
var div=document.createElement（'div'）；
for（var i=0；i

此代码测试对2D转换的支持

它可以轻松调整以检测3D变换支持。只需添加“translateZ（1）”来测试CSS（请参阅源代码中的

defaultTestValues

）

此代码的优点是它检测支持的供应商前缀（如果有）。叫它：

testCSSSupport('transform')

可能的返回值：

false

，当功能不受支持时，或

{
    vendor: 'moz',
    cssStyle: '-moz-transform',
    jsStyle: 'MozTransform'
}

当功能受支持时

/**
 * Test for CSS3 feature support. Single-word properties only by now.
 * This function is not generic, but it works well for transition and transform at least
 */
testCSSSupport: function (feature, cssTestValue/* optional */) {
    var testDiv,
        featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1),
        vendors = ['', 'webkit', 'moz', 'ms'],
        jsPrefixes = ['', 'Webkit', 'Moz', 'ms'],
        defaultTestValues = {
            transform: 'translateX(.5em)'
           // This will test for 2D transform support
           // Add translateZ(1) to test 3D transform
        },
        testFunctions = {
            transform: function (jsProperty, computed) {
                return computed[jsProperty].substr(0, 9) === 'matrix3d(';
            }
        };

    function isStyleSupported(feature, jsPrefixedProperty) {
        if (jsPrefixedProperty in testDiv.style) {
            var testVal = cssTestValue || defaultTestValues[feature],
                testFn = testFunctions[feature];
            if (!testVal) {
                return false;
            }

            //Assume browser without getComputedStyle is either IE8 or something even more poor
            if (!window.getComputedStyle) {
                return false;
            }

            testDiv.style[jsPrefixedProperty] = testVal;
            var computed = window.getComputedStyle(testDiv);

            if (testFn) {
                return testFn(jsPrefixedProperty, computed);
            }
            else {
                return computed[jsPrefixedProperty] === testVal;
            }
        }
    }

    var cssPrefixedProperty,
        jsPrefixedProperty,
        testDiv = document.createElement('div');

    for (var i = 0; i < vendors.length; i++) {
        if (i === 0) {
            cssPrefixedProperty = feature;  //todo: this code now works for single-word features only!
            jsPrefixedProperty = feature;   //therefore box-sizing -> boxSizing won't work here
        }
        else {
            cssPrefixedProperty = '-' + vendors[i] + '-' + feature;
            jsPrefixedProperty = jsPrefixes[i] + featureCapital;
        }

        if (isStyleSupported(feature, jsPrefixedProperty)) {
            return {
                vendor: vendors[i],
                cssStyle: cssPrefixedProperty,
                jsStyle: jsPrefixedProperty
            };
        }
    }

    return false;
}

/**
*测试CSS3特性支持。到目前为止，只有单字属性。
*此函数不是泛型函数，但至少在转换和转换时效果良好
*/
TestCSSSSupport:函数（功能，cssTestValue/*可选*/）{
var testDiv，
featureCapital=feature.charAt（0.toUpperCase（）+feature.substr（1），
供应商=[''，'webkit'，'moz'，'ms']，
jsPrefixes=[''，'Webkit'，'Moz'，'ms']，
defaultTestValues={
转换：'translateX（.5em）'
//这将测试2D变换支持
//添加translateZ（1）以测试3D变换
},
测试函数={
转换：函数（jsProperty，computed）{
返回计算出的[jsProperty].substr（0，9）=='matrix3d（'；
}
};
支持的函数（功能，jsPrefixedProperty）{
if（testDiv.style中的jsPrefixedProperty）{
var testVal=cssTestValue | | defaultTestValues[feature]，
testFn=testFunctions[feature]；
如果（！testVal）{
返回false；
}
//假设没有getComputedStyle的浏览器不是IE8就是更差的浏览器
如果（！window.getComputedStyle）{
返回false；
}
testDiv.style[jsPrefixedProperty]=testVal；
var computed=window.getComputedStyle（testDiv）；
if（testFn）{
返回testFn（jsPrefixedProperty，computed）；
}
否则{
返回计算的[jsPrefixedProperty]==testVal；
}
}
}
var CSSPrefexedProperty，
jsPrefixedProperty，
testDiv=document.createElement（'div'）；
对于（var i=0；i框大小在这里不起作用
}
否则{
CSSPrefexedProperty='-'+供应商[i]+'-'+功能；
jsPrefixedProperty=jsPrefixes[i]+featureCapital；
}
如果（支持ISSTyle（功能，jsPrefixedProperty））{
返回{
供应商：供应商[i]，
cssStyle:CSSPrefexedProperty，
jsStyle:jsPrefixedProperty
};
}
}
返回false；
}

看看源代码（它扩展了jQuery

.css（）

和

.animate（）

函数）是如何实现的。或者，更好的是，只使用该插件：）它很小。您不必从Modernizer下载整个包，您可以从自定义下载中选择2d transform。我刚才看了Modernizer的工作方式，并从中借用了一些小片段用于我的一个项目。@BalusC将此作为答案发布，我接受：）代码中似乎有一个错误：

mStyle未定义

Define then:）var myStyle=[]我不认为你可以定义它。。。看起来，mStyle是一个全局变量，其中包含浏览器支持的css道具……如果必须定义该变量，此函数将完全无效，因为它总是错误的……如果浏览器不支持转换，这将在无限循环中继续（还将吃掉所有ram）。“el”变量的用途是什么？我猜您不想在每个过程中都创建div元素，但没有使用它。显然，在没有前缀的情况下是无限循环。@Dan它不会在无限循环中运行