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
selector {
transform: translateX(verschuiving);
}
Voorbeeld
Als je met de muis over het blok beweegt - schuift het
30px naar rechts:
<div id="elem"></div>
#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:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(-30px);
}
:
Zie ook
-
de functie
translate,
die verschuiving langs de X- en Y-assen bepaalt -
de functie
translateY,
die verschuiving langs de Y-as bepaalt
