Functie translateX

De functie translateX bepaalt de verschuiving van een element langs de X-as. Wordt gebruikt in combinatie met de eigenschap transform. De waarde van de eigenschap zijn alle eenheden voor grootte. Een positieve waarde verschuift naar rechts, een negatieve waarde - naar links.

Syntaxis

cssselector {
  transform: translateX(verschuiving);
}

Voorbeeld

Als je met de muis over het blok beweegt - schuift het 30px naar rechts:

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

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

Результат:

Voorbeeld

Als je met de muis over het blok beweegt - schuift het 30px naar links:

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

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

Результат:

Zie ook