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
sé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 :
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate3d(1, 1, 0, 180deg);
}
:
