Fonction translate

La fonction translate définit le décalage d'un élément selon l'axe X et l'axe Y. Elle est utilisée conjointement avec la propriété transform. Toute unité de taille peut être utilisée comme valeur.

Elle peut prendre un ou deux paramètres. Si il y a deux paramètres - le premier définit le décalage selon l'axe X, et le second - selon l'axe Y. S'il n'y a qu'un paramètre, alors il définit le décalage selon l'axe X.

Les valeurs des paramètres peuvent être positives ou négatives. Une valeur positive sur l'axe X décale vers la droite, une valeur négative - vers la gauche. Une valeur positive sur l'axe Y décale vers le bas, une valeur négative - vers le haut.

Syntaxe

csssélecteur {
  transform: translate(décalage sur l'axe X, décalage sur l'axe Y);
}

Exemple

Si vous passez la souris sur le bloc - il se décalera de 30px vers la droite :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(30px);
}

Результат:

Exemple

Si vous passez la souris sur le bloc - il se décalera de 30px vers la gauche :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(-30px);
}

Результат:

Exemple

Si vous passez la souris sur le bloc - il se décalera de 15px vers la droite et de 30px vers le bas :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(15px, 30px);
}

Результат:

Voir aussi