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

Question

要检测一个浏览器支持translate3d我们可以（在新窗口WebKitCSSMatrix & & m11WebKitCSSMatrix（））使用

，但现在，Firefox支持translate3d如何有一个正确的检测呢？

这个想法是找到一个解决方案，而不使用Modernizr。

Answer 1

我需要类似的东西。我想测试浏览器是否支持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微秒的移动浏览器。

希望这会有所帮助。

Answer 2

另一种选择谁的作品就像一个魅力对我来说：

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"); 
}