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

csssé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 :

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

css#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 :

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateZ(180deg);
}

Результат:

Voir aussi