检测'transform：translate3d'支持 [英] Detecting 'transform: translate3d' support

问题描述

有没有人知道我会如何检测 transform：translate3d（x，y，z）支持？

Does anyone know how I would detect transform: translate3d(x,y,z) support is available?

我的问题是，我想在支持的浏览器中使用 translate3d ，因为它倾向于使用硬件加速，因此更平滑的动画，然后回到<$

My issue is that I want to use translate3d across browsers where it is supported because it tends to use hardware acceleration and hence smoother for animation, and then fall back to translate where its not.

推荐答案

签出此解决方案。

这是基于以下事实：如果浏览器支持变换， / p>

It is based on the fact that if a browser supports transforms, the value of

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

将是一个包含转换矩阵的字符串，当将一个3d变换应用于元素 el 。否则，将会是 undefined 或字符串'none'，如Opera 12.02的情况。

will be a string containing the transformation matrix, when a 3d transform is applied to the element el. Otherwise, it will be undefined or the string 'none', as in the case of Opera 12.02.

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

It works on all major browsers.

代码：

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

这篇关于检测'transform：translate3d'支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！