检测'transform:translate3d'支持

时间:2011-04-14 10:11:34

标签: css html5 css3

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

我的问题是我希望在支持它的浏览器中使用translate3d,因为它倾向于使用硬件加速,因此动画更顺畅,然后回到translate,而不是。{ / p>

12 个答案:

答案 0 :(得分:42)

查看this solution

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

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

答案 1 :(得分:10)

original blog post announcing 3D transforms有一个image flip demo,它使用媒体查询来执行此操作,如下所示:

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

This blog post有一个很好的媒体查询介绍。 This有更多细节。

答案 2 :(得分:9)

您可以尝试使用CCS3 @supports

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

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

Can I use @support

答案 3 :(得分:4)

我建议使用Modernizr

它可以检测各种浏览器功能,包括3D变换。它还提供了一种为具有各种功能的浏览器指定CSS规则的方法,因此它听起来就像你正在寻找的那样。

希望有所帮助。

答案 4 :(得分:4)

//The following is based on iScroll4's tests to determine if a browser supports CSS3 3D     transforms.
var has3d = function() {
    return ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix());
}

答案 5 :(得分:1)

正在修补一种检查3d支持的方法..在这个article中使用了Jeffery Way的这个实现。允许更少的代码和更多的用例;)

/**
* Test For CSS3 property support
* use 'perspective' to test for 3d support
*/
var supports = (function() {

    'use strict';

    var div = document.createElement('div'),
        vendors = 'Khtml ms O Moz Webkit'.split(' '),
        len = vendors.length;

    return function(prop) {

        if (prop in div.style) return true;

        prop = prop.replace(/^[a-z]/, function(val) {
            return val.toUpperCase();
        });

        while(len--) {
            if (vendors[len] + prop in div.style) {
                return true;
            } 
        }

        return false;
    };
})();

if(supports('perspective')) {
    // do 3d stuff
}

答案 6 :(得分:0)

此代码经过调整,可用于测试 3D转换支持和其他CSS3功能。

此代码的优点是它检测到支持的供应商前缀(如果有)。叫它:

testCSSSupport('transform')

可能的返回值:

false,功能不受支持时,或

{
    vendor: 'moz',
    cssStyle: '-moz-transform',
    jsStyle: 'MozTransform'
}

支持功能时

/**
 * Test for CSS3 feature support. Single-word properties only by now.
 * This function is not generic, but it works well for transition and transform at least
 */
testCSSSupport: function (feature, cssTestValue/* optional */) {
    var testDiv,
        featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1),
        vendors = ['', 'webkit', 'moz', 'ms'],
        jsPrefixes = ['', 'Webkit', 'Moz', 'ms'],
        defaultTestValues = {
            transform: 'translateZ(0.5em) rotateY(10deg) scale(2)'
           // This will test for 3D transform support
           // Use translateX to test 2D transform
        },
        testFunctions = {
            transform: function (jsProperty, computed) {
                return computed[jsProperty].substr(0, 9) === 'matrix3d(';
            }
        };

    function isStyleSupported(feature, jsPrefixedProperty) {
        if (jsPrefixedProperty in testDiv.style) {
            var testVal = cssTestValue || defaultTestValues[feature],
                testFn = testFunctions[feature];
            if (!testVal) {
                return false;
            }

            //Assume browser without getComputedStyle is either IE8 or something even more poor
            if (!window.getComputedStyle) {
                return false;
            }

            testDiv.style[jsPrefixedProperty] = testVal;
            var computed = window.getComputedStyle(testDiv);

            if (testFn) {
                return testFn(jsPrefixedProperty, computed);
            }
            else {
                return computed[jsPrefixedProperty] === testVal;
            }
        }
    }

    //Create a div for tests and remove it afterwards
    if (!testDiv) {
        testDiv = document.createElement('div');
        document.body.appendChild(testDiv);
        setTimeout(function () {
            document.body.removeChild(testDiv);
            testDiv = null;
        }, 0);
    }

    var cssPrefixedProperty,
        jsPrefixedProperty;

    for (var i = 0; i < vendors.length; i++) {
        if (i === 0) {
            cssPrefixedProperty = feature;  //todo: this code now works for single-word features only!
            jsPrefixedProperty = feature;   //therefore box-sizing -> boxSizing won't work here
        }
        else {
            cssPrefixedProperty = '-' + vendors[i] + '-' + feature;
            jsPrefixedProperty = jsPrefixes[i] + featureCapital;
        }

        if (isStyleSupported(feature, jsPrefixedProperty)) {
            return {
                vendor: vendors[i],
                cssStyle: cssPrefixedProperty,
                jsStyle: jsPrefixedProperty
            };
        }
    }

    return false;
}

答案 7 :(得分:0)

Bootstrap使用以下代码:

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner > .carousel-item {
        transition: transform 0.6s ease-in-out;
        backface-visibility: hidden;
        perspective: 1000px;
    }
    .carousel-inner > .carousel-item.next,
    .carousel-inner > .carousel-item.active.right {
        left: 0;
        transform: translate3d(100%, 0, 0);
    }
    .carousel-inner > .carousel-item.prev,
    .carousel-inner > .carousel-item.active.left {
        left: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .carousel-inner > .carousel-item.next.left,
    .carousel-inner > .carousel-item.prev.right,
    .carousel-inner > .carousel-item.active {
        left: 0;
        transform: translate3d(0, 0, 0);
    }
}

答案 8 :(得分:-1)

tl:dr - 使用用户代理嗅探。这是一个用于检测跨浏览器的CSS 3D转换支持的脚本:https://github.com/zamiang/detect-css3-3D-transform

我尝试了这篇文章中的大多数方法,其中包括ModernizerMeny方法,但不支持像Firefox这样的浏览器,同时为Safari 4&amp; 5等老式浏览器保持良好的体验,iOS设备和Retina MacBook专业版Chrome(他们都有他们的怪癖)。

CSS3 3D转换涉及浏览器和图形卡之间的交互。浏览器可能能够解析3D声明,但可能无法正确指示图形卡如何呈现页面。有许多可能的结果,从页面渲染与其中的线条(Safari 4)到页面渲染精美,然后在几秒钟后崩溃浏览器(iOS4上的Safari)。任何“特征检测”方法都不可接受地将这些标记为“支持CSS3 3D变换”。这是“特征检测”失败并且用户代理嗅探(以及大量测试)失败的一种情况。

大多数功能检测都假设“支持”或“不支持”二进制。 CSS3 3D变换不是这种情况 - 有一种'支持渐变'。

CSS3 3D转换支持可以分为4个级别:

  1. 可靠地支持大多数机器的3D变换。例如:Safari 6
  2. 可以解析并应用3D变换声明但忽略3D部分。例如:Retina MacBook Pro上的Chrome。
  3. 可以解析并应用3D变换声明,但以不可接受的方式呈现。例如:Windows上的Safari 4和Safari 4/5在页面上显示行。
  4. 无法以任何方式应用3D变换声明。例如:IE或Firefox&lt; V10
  5. This script将在第1和第2场中返回true,但在第3和第4位时返回false

    注意:参与stackoverflow的新手 - 请告诉我是否应将内嵌代码粘贴(有点长)

答案 9 :(得分:-2)

使用jQuery:

var cssTranslate3dSupported = false;
(function()
{
    var div = $('<div style="position:absolute;">Translate3d Test</div>');
    $('body').append(div);
    div.css(
    {
        'transform' : "translate3d(20px,0,0)",
        '-moz-transform' : "translate3d(20px,0,0)",
        '-webkit-transform' : "translate3d(20px,0,0)",
        '-o-transform' : "translate3d(20px,0,0)",
        '-ms-transform' : "translate3d(20px,0,0)"
    });
    cssTranslate3dSupported = (div.offset().left == 20);
    div.empty().remove();
})();

答案 10 :(得分:-6)

Hardware Accelerated Accordion的作者会这样检查:

var has3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix())

答案 11 :(得分:-7)

只需使用:

alert($.support.cssTransform3d);

如果支持,则警告为true,否则为