Fonction rotate3d

La fonction rotate3d définit la rotation d'un élément selon un angle donné simultanément par rapport aux axes X, Y, 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.

La fonction accepte 4 paramètres comme valeurs, écrits séparés par des virgules. Les trois premiers paramètres définissent le vecteur de l'axe dans l'espace tridimensionnel, par rapport auquel la rotation sera effectuée. Le quatrième paramètre définit l'angle de rotation.

Syntaxe

csssélecteur {
  transform: rotate3d(X, Y, Z, angle);
}

Exemple

Dans cet exemple, le vecteur de l'axe sera dirigé vers le coin supérieur droit de l'écran :

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Voir aussi