Détection du support de 'transform: translate3d'

Question

Est-ce que quelqu'un sait comment je pourrais détecter si le support de transform: translate3d(x,y,z) est disponible?

Mon problème est que je veux utiliser translate3d dans tous les navigateurs où il est supporté car cela a tendance à utiliser l'accélération matérielle et donc à rendre les animations plus fluides, puis revenir à translate là où ce n'est pas disponible.

Answer 1

Découvrez cette solution.

Elle est basée sur le fait que si un navigateur prend en charge les transformations, la valeur de

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

sera une chaîne contenant la matrice de transformation, lorsqu'une transformation 3D est appliquée à l'élément el. Sinon, elle sera undefined ou la chaîne 'none', comme c'est le cas pour Opera 12.02.

Il fonctionne sur tous les principaux navigateurs.

Le code:

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'
        };

    // Ajoutez-le au corps pour obtenir le style calculé.
    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

L'article de blog original annonçant les transformations 3D contient une démonstration de retournement d'image, qui le fait avec une requête média, comme ceci :

@media all and (-webkit-transform-3d) {
  /* Utiliser la requête média pour déterminer si les transformations 3D sont prises en charge */
  #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);
  }
}

Cet article de blog propose une bonne introduction aux requêtes média. Cet article contient quelques détails supplémentaires.

Answer 3

Vous pouvez essayer CCS3 @supports:

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

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

Puis-je utiliser @support

Answer 4

//Ce qui suit est basé sur les tests d'iScroll4 pour déterminer si un navigateur prend en charge les transformations CSS3 3D.
var has3d = function() {
    return ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix());
}

Answer 5

Je suggère d'utiliser Modernizr.

Il effectue une détection des fonctionnalités du navigateur, y compris les transformations 3D. Il fournit également une méthode pour spécifier des règles CSS pour les navigateurs qui ont différentes fonctionnalités ou non, donc il semble faire exactement ce que vous recherchez.

J'espère que cela vous aidera.