Fonction rotate
La fonction rotate() définit la rotation d'un élément
d'un angle donné. 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 effectue une rotation
dans le sens des aiguilles d'une montre, une valeur négative - dans le sens inverse.
La rotation est effectuée autour du point défini par
la propriété transform-origin.
Syntaxe
sélecteur {
transform: rotate(angle);
}
Exemple
Dans cet exemple, le bloc est tourné de 30
degrés dans le sens des aiguilles d'une montre :
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemple
Dans cet exemple, le bloc est tourné de 30
degrés dans le sens inverse des aiguilles d'une montre :
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemple
Dans cet exemple, le bloc au survol effectuera une rotation
de 1 tour, car la valeur de rotation est
définie en 1turn (le même effet peut être obtenu
en définissant l'angle de rotation en 360deg). 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: rotate(1turn);
}
:
