Fonction rotateY
La fonction rotateY définit une rotation autour de
l'axe Y 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
sélecteur {
transform: rotateY(angle);
}
Exemple
Dans cet exemple, la boîte pivote lors du survol
de 180 degrés autour de l'axe Y. Pour une rotation
fluide, 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: rotateY(180deg);
}
:
Exemple
Changeons l'axe de rotation avec 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: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
