如何在没有webkit上下文的情况下检测CSS translate3d？

要检测浏览器是否支持

translate3d

，我们可以使用（

WebKitCSSMatrix

在窗口中&

m11

在新的WebKitCSSMatrix（）中）

但是现在firefox支持

translate3d

如何正确检测它呢

---

我们的想法是在不使用现代化的情况下找到解决方案

我需要类似的东西。我想测试浏览器是否支持translate3d而不使用库。我没有发现任何不是webkit特定的好的通用测试。经过大量的实验，我提出了以下测试。我首先创建一个测试元素，为其分配一个转换函数，然后查看该元素是否保留了转换函数

function Has3DSupport()
{
    var sTranslate3D = "translate3d(0px, 0px, 0px)";

    var eTemp = document.createElement("div");

    eTemp.style.cssText = "  -moz-transform:"    + sTranslate3D +
                          "; -ms-transform:"     + sTranslate3D +
                          "; -o-transform:"      + sTranslate3D +
                          "; -webkit-transform:" + sTranslate3D +
                          "; transform:"         + sTranslate3D;
    var rxTranslate = /translate3d\(0px, 0px, 0px\)/g;
    var asSupport = eTemp.style.cssText.match(rxTranslate);
    var bHasSupport = (asSupport !== null && asSupport.length == 1);

    return bHasSupport;
} // Has3DSupport

该功能对于我的需求来说速度非常快：桌面浏览器<50微秒，移动浏览器<500微秒

---

希望这有帮助。

我需要类似的东西。我想测试浏览器是否支持translate3d而不使用库。我没有发现任何不是webkit特定的好的通用测试。经过大量的实验，我提出了以下测试。我首先创建一个测试元素，为其分配一个转换函数，然后查看该元素是否保留了转换函数

function Has3DSupport()
{
    var sTranslate3D = "translate3d(0px, 0px, 0px)";

    var eTemp = document.createElement("div");

    eTemp.style.cssText = "  -moz-transform:"    + sTranslate3D +
                          "; -ms-transform:"     + sTranslate3D +
                          "; -o-transform:"      + sTranslate3D +
                          "; -webkit-transform:" + sTranslate3D +
                          "; transform:"         + sTranslate3D;
    var rxTranslate = /translate3d\(0px, 0px, 0px\)/g;
    var asSupport = eTemp.style.cssText.match(rxTranslate);
    var bHasSupport = (asSupport !== null && asSupport.length == 1);

    return bHasSupport;
} // Has3DSupport

该功能对于我的需求来说速度非常快：桌面浏览器<50微秒，移动浏览器<500微秒

---

希望这有帮助。

另一个对我来说很有魅力的选择：

function has3d() {
    var el = document.createElement('p'), 
        has3d,
        transforms = {
            'WebkitTransform':'-webkit-transform',
            'OTransform':'-o-transform',
            'MSTransform':'-ms-transform',
            'MozTransform':'-moz-transform',
            'Transform':'transform'
        };

    // Add it to the body to get the computed style.
    document.body.insertBefore(el, null);

    for (var t in transforms) {
        if (el.style[t] !== undefined) {
            el.style[t] = "translate3d(1px,1px,1px)";
            has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
        }
    }

    document.body.removeChild(el);

    return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}

---

另一个对我来说很有魅力的选择：

function has3d() {
    var el = document.createElement('p'), 
        has3d,
        transforms = {
            'WebkitTransform':'-webkit-transform',
            'OTransform':'-o-transform',
            'MSTransform':'-ms-transform',
            'MozTransform':'-moz-transform',
            'Transform':'transform'
        };

    // Add it to the body to get the computed style.
    document.body.insertBefore(el, null);

    for (var t in transforms) {
        if (el.style[t] !== undefined) {
            el.style[t] = "translate3d(1px,1px,1px)";
            has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
        }
    }

    document.body.removeChild(el);

    return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}