检测'transform:translate3d'支持

Question

有谁知道我会如何检测transform: translate3d(x,y,z)支持？

我的问题是我想translate3d在支持它的浏览器中使用,因为它倾向于使用硬件加速,因此动画更顺畅,然后回到translate不支持的地方.

Answer 1

看看这个解决方案.

它基于以下事实:如果浏览器支持转换,则值为

window.getComputedStyle(el).getPropertyValue('transform')

将3d变换应用于元素时,将包含包含变换矩阵的字符串el.否则,它将是undefined或字符串'none',如Opera 12.02的情况.

它适用于所有主流浏览器.

代码:

function has3d() {
    if (!window.getComputedStyle) {
        return false;
    }

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

Answer 2

宣布3D变换的原始博客文章有一个图像翻转演示,它使用媒体查询来完成,如下所示:

@media all and (-webkit-transform-3d) {
  /* Use the media query to determine if 3D transforms are supported */
  #flip-container {
    -webkit-perspective: 1000;
  }
  #flip-card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
  }
  #flip-container:hover #flip-card {
    -webkit-transform: rotateY(180deg);
  }
}

这篇博文有一个很好的媒体查询介绍. 这有更多细节.

Answer 3

您可以尝试CCS3 @supports:

@supports (transform: translate3d) {
  div {
    transform : translate3d(20px,0,0);
  }
}

@supports not (transform: translate3d) {
  div {
    transform: translate(20px,0);
  }
}

我可以使用@support吗？

Answer 4

我建议使用Modernizr。

它对整个浏览器功能进行功能检测，包括 3D 转换。它还提供了一种为具有或不具有各种功能的浏览器指定 CSS 规则的方法，因此听起来它会完全满足您的要求。

希望有帮助。