logo oujood
🔍

OUJOOD.COM

Tutoriel sur la propriété CSS translate

La propriété CSS translate permet de déplacer un élément dans le plan 2D ou 3D, sans affecter le flux normal du document.

Syntaxe générale

La syntaxe générale de la propriété translate est la suivante :

transform: translate(x, y);

La valeur x spécifie le déplacement horizontal de l'élément, tandis que la valeur y spécifie le déplacement vertical.

Valeurs par défautnone
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.translate="10px 20px"

Valeurs possibles

Les valeurs possibles pour les paramètres x et y de la propriété translate sont :

  • px : déplacement en pixels.
  • % : déplacement en pourcentage de la taille de l'élément lui-même.
  • em : déplacement en em, basé sur la taille de la police de l'élément parent.
  • rem : déplacement en rem, basé sur la taille de la police de la racine du document.
  • vw : déplacement en unité de vue en largeur (1vw équivaut à 1% de la largeur de la fenêtre).
  • vh : déplacement en unité de vue en hauteur (1vh équivaut à 1% de la hauteur de la fenêtre).

Exemples pratiques d'utilisation

Voici quelques exemples pratiques d'utilisation de la propriété translate:

Ci-dessous nous avons un conteneur de dimensions 300x200 pixels avec un arrière-plan gris clair, et à l'intérieur de ce conteneur, une boîte de dimensions 100x100 pixels avec un arrière-plan orange est centrée horizontalement et verticalement en utilisant la propriété CSS translate("transform: translate(-50%, -50%);") pour déplacer la boîte de moitié de sa propre largeur vers la gauche et de moitié de sa propre hauteur vers le haut. Cela permet de centrer parfaitement la boîte dans le conteneur, quelle que soit sa taille.

Exemple 1 : Déplacement horizontal

Pour déplacer un élément de 50 pixels vers la droite :

   .box {
  transform: translate(50px, 0);

Exemple 2 : Déplacement vertical

Pour déplacer un élément de 20 pixels vers le bas :

.box {
  transform: translate(0, 20px);
}

Exemple 3 : Déplacement diagonal

    .box {
  transform: translate(50px, 20px);

Exemple 4 : Déplacement en pourcentage

Pour déplacer un élément de 25% de sa propre largeur vers la gauche et de 10% de sa propre hauteur vers le haut :

.box {
  transform: translate(-25%, -10%);
}

Astuces et conseils d'utilisation

  • La propriété translate fonctionne bien en combinaison avec d'autres transformations CSS telles que rotate et scale.
  • Vous pouvez utiliser des valeurs négatives pour effectuer des déplacements dans la direction opposée.
  • La propriété translate est plus performante que la modification des propriétés top et left, car elle utilise l'accélération matérielle.
  • Vous pouvez animer les transitions de déplacement en utilisant des transitions CSS ou des animations.

Exemple : modifier la valeur de la propriété css translate

Exemple avec javascript pour modifier la valeur de la propriété css translate

Exemple :    📋 Copier le code 

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété translate css</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;
  text-align: center;
  background-color: #272822;
  border-radius: 3px;
  color: #F8F8F2;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
}

.token-function {
  color: #E6DB74;
  width: 40px;
 
}
</style>
</head>
<body>

<h1>La propriété css translate</h1> <br>

<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 = 0,
    Yvalue = 0,
    ans = `${Xvalue} ${Yvalue}`;

sliderX.addEventListener('input', function () {
  Xvalue = this.value + 'px';
  ans = `${Xvalue} ${Yvalue}`;
  box.style.translate = ans;
  document.querySelector('.token-function').textContent = ans;
}, false);

sliderY.addEventListener('input', function () {
  Yvalue = this.value + 'px';
  ans = `${Xvalue} ${Yvalue}`;
  box.style.translate = ans;
  document.querySelector('.token-function').textContent = ans;
}, false);
</script>
</body>
</html>

En conclusion, la propriété CSS translate est un outil puissant pour déplacer des éléments dans le plan 2D ou 3D. Elle offre une flexibilité et une performance accrues par rapport aux méthodes de positionnement traditionnelles. Expérimentez avec différentes valeurs et combinaisons pour créer des effets de déplacement intéressants dans vos projets web.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion104 104 7214.1 90

- Liste des propriétés css -