Обнаружение поддержки 'transform: translate3d'

Question

Кто-нибудь знает, как я могу обнаружить transform: translate3d(x,y,z) доступна поддержка?

Моя проблема заключается в том, что я хочу использовать translate3d во всех браузерах, где он поддерживается, поскольку он имеет тенденцию использовать аппаратное ускорение и, следовательно, плавнее для анимации, а затем вернуться к translate, где его нет.

Answer 1

Использование 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();
})();

Answer 2

Автор Аппаратное ускорение аккордеона проверяет так:

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