Fonction rotateZ
La fonction rotateZ définit une rotation par rapport à
l'axe Z 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
dans le sens des aiguilles d'une montre, une valeur négative - dans le sens inverse.
La rotation s'effectue autour du point défini par
la propriété transform-origin.
Syntaxe
sélecteur {
transform: rotateZ(angle);
}
Exemple
Dans cet exemple, le bloc pivote lors du survol
de 180 degrés autour de l'axe Z. Pour une transition fluide
de la rotation, 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: rotateZ(180deg);
}
:
Exemple
Changeons l'axe de rotation à l'aide de 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: rotateZ(180deg);
}
:
