CSS Transforms

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le module CSS Transforms (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.

Référence

Propriétés

Guides

Utiliser les transformations CSS
Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.

Spécifications

Spécification État Commentaires
CSS Transforms Level 1 Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple

(Oui) -webkit
36

3.5 (1.9.1)-moz[1]
16.0 (16.0)[2]
9.0-ms[3]
10.0
10.5-o
12.10
15.0-webkit
23
3.1-webkit
3D 12.0-webkit
36
10.0-moz
16.0 (16.0)
10.0 15.0-webkit
23
4.0-webkit
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 2.1-webkit[4] (Oui)-webkit (Oui) (Oui)
11.0-webkit[5]
11.5-webkit 3.2 (Oui)-webkit
3D 3.0-webkit (Oui)-webkit (Oui) (Oui) 22-webkit 3.2 (Oui)-webkit

[1] Gecko 14.0 a retiré la prise en charge expérimentale de la fonction skew() qui fut réintroduite dans Gecko 15.0 pour des raisons de compatibilité. Cette fonction n'est pas standard et sera très certainement retirée à l'avenir, il ne faut pas l'utiliser.

[2] Avant Firefox 16, les valeurs de translation pour matrix() et matrix3d() pouvaient être des longueurs (type <length>) en plus du type, standard, <number>.

[3] Internet Explorer 5.5 ou ultérieur prend en charge un filtre matriciel propriétaire qui peut être utilisé pour obtenir un effet similaire.

Internet Explorer 9.0 ou antérieur ne prenait pas en charge les transformations 3D. Le mélange de transformations 2D / 3D empêchait toute application (par exemple : -ms-transform:rotate(10deg) translateZ(0);).

[4] Android 2.3 contenait un bug où les champs input des formulaires sautaient lors de la saisie si un des éléments englobant était visé par une règle avec -webkit-transform.

[5] Internet Explorer 11.0 prend en charge une variante préfixée par -webkit comme alias de la valeur par défaut.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, Prinz_Rana, teoli
 Dernière mise à jour par : SphinxKnight,