如何在沒有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"); 
}