Propriété CSS translate : déplacer un élément en 2D et 3D

OUJOOD.COM

À quoi sert la propriété CSS translate ?

La propriété CSS translate déplace un élément horizontalement, verticalement, ou en profondeur (axe Z) — sans toucher au flux normal du document. Les autres éléments de la page ne bougent pas : seul l'élément ciblé se déplace visuellement.

Modifier top ou left déclenche un recalcul du rendu complet de la page. translate, lui, passe par le GPU — les animations sont donc plus fluides, surtout sur mobile. C'est la raison pour laquelle on l'utilise de préférence pour les effets de survol et les transitions.

Valeur par défaut	none
Héritée	non
Animable	oui — en savoir plus
Version	CSS3
Syntaxe JavaScript	object.style.translate = "10px 20px"

Syntaxe

Deux syntaxes coexistent. La première passe par la fonction translate() dans la propriété transform — méthode historique, compatible partout :

📋 Copier le code

/* Via transform — méthode classique */
transform: translate(x, y);

transform: translate(50px, 0);       /* 50px vers la droite */
transform: translate(0, 20px);       /* 20px vers le bas */
transform: translate(-50%, -50%);    /* centrage : recule de la moitié de la taille de l'élément */

La seconde utilise translate comme propriété autonome — plus lisible, disponible depuis Chrome 104, Firefox 72 et Safari 14.1 :

📋 Copier le code

/* Propriété translate directe */
translate: 50px;          /* axe X uniquement */
translate: 50px 20px;     /* axe X puis axe Y */
translate: 50px 20px 0;   /* X, Y et Z (profondeur en 3D) */

Unités acceptées

Les valeurs x et y acceptent n'importe quelle unité CSS de longueur. Les plus utiles en pratique : px pour une valeur fixe, % pour un déplacement relatif à la taille de l'élément lui-même (pas du parent — c'est important pour le centrage), em et rem pour suivre la taille de police, vw et vh pour des déplacements liés à la taille de la fenêtre.

Exemples pratiques

Centrer un élément dans son conteneur

La technique classique : positionner l'élément à 50% en haut et à gauche, puis le décaler de la moitié de sa propre taille. Ça fonctionne quelle que soit la taille de l'élément — pas besoin de connaître ses dimensions à l'avance :

📋 Copier le code

.conteneur {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  position: relative;
}
.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* recule de moitié sur chaque axe */
}

Résultat :

Déplacements horizontaux, verticaux et diagonaux

📋 Copier le code

/* 50px vers la droite */
.box { transform: translate(50px, 0); }

/* 20px vers le bas */
.box { transform: translate(0, 20px); }

/* diagonal : droite et bas */
.box { transform: translate(50px, 20px); }

/* valeurs négatives : gauche et haut */
.box { transform: translate(-25%, -10%); }

Effet de survol avec transition

Combiné à transition, translate donne des effets de survol propres. Deux lignes suffisent :

📋 Copier le code

.bouton {
  transition: translate 0.2s ease;
}
.bouton:hover {
  translate: 0 -4px; /* remonte légèrement au survol */
}

Démonstration interactive

Deux curseurs pour déplacer un carré en temps réel sur les axes X et Y. Le code affiché se met à jour à chaque mouvement :

📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Démonstration CSS translate</title>
  <style>
html, body {
  height: 100vh;
  width: 100%;
  background: #00136c;
  color: #fff;
  font-family: system-ui;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.conteneur { width: 100px; height: 100px; border: 4px solid #fff; }
.box { width: 100px; height: 100px; background-color: skyblue; }
.second-conteneur { margin-top: 50px; }
.ranges { display: flex; gap: 100px; }
input { width: 200px; }
.code-conteneur {
  margin-top: 50px;
  display: inline-block;
  padding: 15px;
  background-color: #272822;
  border-radius: 3px;
  color: #F8F8F2;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
}
.token-function { color: #E6DB74; }
  </style>
</head>
<body>
<h1>La propriété CSS translate</h1>
<div class="conteneur">
  <div class="box"></div>
</div>
<p>Glisser pour modifier la valeur de <strong>translate</strong></p>
<div class="second-conteneur">
  <div class="ranges">
    <input class="xdirection" type="range" min="-200" max="200" step="1" value="0">
    <input class="ydirection" type="range" min="-200" max="200" step="1" value="0">
  </div>
  <output class="code-conteneur">translate: <span class="token-function">0px 0px;</span></output>
</div>
<script>
var box = document.querySelector('.box'),
    sliderX = document.querySelector('.xdirection'),
    sliderY = document.querySelector('.ydirection'),
    Xvalue = '0px',
    Yvalue = '0px';

sliderX.addEventListener('input', function () {
  Xvalue = this.value + 'px';
  box.style.translate = Xvalue + ' ' + Yvalue; // axe X mis à jour
  document.querySelector('.token-function').textContent = Xvalue + ' ' + Yvalue;
});

sliderY.addEventListener('input', function () {
  Yvalue = this.value + 'px';
  box.style.translate = Xvalue + ' ' + Yvalue; // axe Y mis à jour
  document.querySelector('.token-function').textContent = Xvalue + ' ' + Yvalue;
});
</script>
</body>
</html>

Compatibilité navigateurs

La propriété translate autonome (sans transform) requiert des versions récentes. Pour des projets devant tourner sur des navigateurs plus anciens, restez sur transform: translate() qui est supportée partout depuis des années.

Navigateur
Version minimale	104	104	72	14.1	90

Par carabde | Mis à jour le 29 avril 2026

Liste des propriétés CSS