Css3 alternative pour translate3d?

J'essaie de convertir un script JS qui a été créé pour les périphériques tactiles comme ipads afin qu'il puisse être utilisé avec les gestes de la souris.

Le script utilise translate3d, qui (je pense) est spécifique au webkit, mais j'aimerais que cela fonctionne dans autant de navigateurs que possible. Alors, quelle est l'alternative CSS3 à traduire3d?

Voici comment il est utilisé dans JavaScript:

element.style.webkitTransform = 'translate3d(500px, 0, 0)';

Ma connaissance de CSS3 est très limitée, donc les exemples / explications que vous pouvez donner sont très appréciés.

Translate3d est CSS3, la plupart des navigateurs ne l'ont pas encore implémenté (Chrome / Safari sont les seuls majeurs à le supporter via Webkit). C'est un style de transformation 3-D.

Il y a aussi des transformations 2-D qui coupent l'axe Z, donc:

 translate3d(X,Y,Z); // or translateX(X), translateY(Y), translateZ(Z);

devient

 translate(X,Y);

Heureusement, les transformations 2-D sont principalement prises en charge par tous les principaux navigateurs (IE9 et versions ultérieures), mais elles nécessitent des préfixes de navigateur. Dans votre exemple, cela ressemblerait à:

 /* CSS */ selector { transform: translate(500px, 0); -o-transform: translate(500px, 0); /* Opera */ -ms-transform: translate(500px, 0); /* IE 9 */ -moz-transform: translate(500px, 0); /* Firefox */ -webkit-transform: translate(500px, 0); /* Safari and Chrome */ } /* JS */ element.style.transform = 'translate(500px, 0)'; element.style.OTransform = 'translate(500px, 0)'; // Opera element.style.msTransform = 'translate(500px, 0)'; // IE 9 element.style.MozTransform = 'translate(500px, 0)'; // Firefox element.style.WebkitTransform = 'translate(500px, 0)'; // Safari and Chrome

Pour un peu plus sur les transformations 2-D et 3-D, voir:
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/

L'inconvénient des transformations en 2D est que, contrairement aux transformations 3D, elles ne sont pas accélérées par GPU. Consultez ce lien pour de bonnes informations sur la quantité d'accélération matérielle qui aide les transitions et les animations: http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html .

Pour plus de bannis croisés, vous pouvez écrire une fonction pour trouver le style de transformation du navigateur approprié à appliquer (ou déterminer si le navigateur ne prend pas en charge les transformations):

 var getTransformProperty = function(node) { var properties = [ 'transform', 'WebkitTransform', 'msTransform', 'MozTransform', 'OTransform' ]; var p; while (p = properties.shift()) { if (typeof node.style[p] != 'undefined') { return p; } } return false; };

Vous pouvez également utiliser une bibliothèque de détection de fonctionnalités comme Modernizr .

Les transformées 2d semblent être plus largement prises en charge , avec des préfixes de fournisseurs. Voici la spécification W3C .

 element.style.webkitTransform = 'translate(500px)';

Vous pouvez utiliser Modernizr pour vérifier l'assistance .