Translate - Propriété CSS

Schéma syntaxique de translate.

Précisions concernant le schéma ci-dessus :

• length est une valeur numérique suivie d'une des unités de dimension. De une à trois valeurs peuvent être indiquées, séparées par des espaces. Elles correspondent aux déplacements suivant les trois axes.

Description de la propriété translate.

La propriété translate définit la translation (le déplacement) de l'élément suivant un ou plusieurs des trois axes. Elle accepte de une à trois valeurs, qui correspondent aux déplacements suivant les axes x, y et z.
Les axes x et y sont dans le plan de l'écran, tandis que l'axe z est perpendiculaire à l'écran, et dirigé vers les yeux du lecteur.

Différence avec la propriété générale transform.

Bien que les transform:translateX(50px) et translate:50px fassent des choses équivalentes, il y a quand même une différence importante à signaler. Cette différence apparaît lorsque plusieurs transformations successives sont appliquées à un élément. En effet, transform considère que les axes de références sont associés à l'élément et applique donc à ces axes les mêmes transformations qu'à l'élément. Ce que ne font pas les propriétés de transformation individuelles comme rotate ou translate.

La différence apparaît ci-dessous : un élément a été tourné de 30 degrés, puis décalé de 100 pixels. Suivant la syntaxe utilisée il ne se retrouve pas au même emplacement.

Résultat d'une rotation suivie d'une translation
transform:rotate(30deg) translate(100px);

Résultat d'une rotation suivie d'une translation
rotate:30deg;
translate:100px;

Valeurs pour translate.

• translate: none;

  Valeur par défaut. Aucun déplacement n'est appliqué à l'élément.

• translate: 20px;

  Si une seule valeur unique est spécifiée, l'élément est déplacé horizontalement (suivant l'axe x).

  La valeur doit être suivie d'une des unités de dimension (voir les unités de dimension). Si la valeur est indiquée en pourcentage, elle sera calculée par rapport à la largeur de l'élément.

  Une valeur négative provoque un déplacement vers la gauche, tandis qu'une valeur positive correspond à un déplacement vers la droite.

• translate: 20px 30px;

  Lorsque deux valeurs sont spécifiées, elles correspondent respectivement aux déplacements à appliquer horizontalement (axe x) et verticalement (axe y).

• translate: 20px 50px 20px;

  Lorsqu'une troisième valeur est spécifiée, elle s'applique à un déplacement de l'élément suivant l'axe z.

  Les déplacements suivant l'axe z ne sont visibles que si la propriété perspective a été appliquée au parent avec une valeur différente de none.

• translate: initial; (none) translate: inherit; translate: revert; translate: revertLayer; translate: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété translate.

L'animation de la propriété translate se traduit par un élément qui se déplace sur la page, horizontalement ou verticalement, ou même suivant l'axe Z dans le cas d'une animation 3D.

Simulateur avec la propriété translate.

Pour que les déplacements suivant l'axe Z soient visible, la propriété perspective a été appliquée à l'élément parent, avec une valeur de 100 pixels.

Prise en charge de translate par les navigateurs.

La propriété translate est bien reconnue par les navigateurs. La syntaxe utilisant la propriété transform avec la fonction translate() reste également une autre possibilité valable.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

(2) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

1

Transformations
2D

2

Transformations
3D

3

Propriété
translate

Estimation de la prise en charge globale.

97%

97%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Historique de la propriété translate.

• Module CSS - Transformations - Niveau 2

  Ajout de la propriété translate, en complément de la propriété plus générale transform et de la fonction translate() toujours standardisées.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le module "Module CSS - Transformations" (ou CSS Transforms Module en anglais) décrit la propriété translate, ainsi que toutes les autres propriétés et fonctions relatives aux transformations :

Propriétés :

Fonctions :