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

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

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

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

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: rotateX(180deg);
}

Результат:

Exemple

Définissons un angle négatif :

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: rotateX(-180deg);
}

Результат:

Voir aussi