Fonction rotateX
La fonction rotateX définit une rotation autour de
l'axe X dans l'espace tridimensionnel. Elle est utilisée
conjointement avec la propriété transform.
La valeur de la propriété est un angle dans n'importe quelle unité
d'angle. Une valeur positive fait pivoter l'élément
vers nous, une valeur négative - loin de nous. La rotation est effectuée
autour du point défini par la propriété transform-origin.
Syntaxe
sélecteur {
transform: rotateX(angle);
}
Exemple
Dans cet exemple, la div au survis tournera
de 180 degrés autour de l'axe X. Pour une transition
fluide, la propriété transition a été ajoutée :
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateX(180deg);
}
:
Exemple
Changeons l'axe de rotation avec la propriété
transform-origin :
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(180deg);
}
:
Exemple
Définissons un angle négatif :
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(-180deg);
}
:
