Comment faire tourner une images, icone, div ou autre éléments à 360 degrés.
Commençons par définir un élément à faire tourner. A noter le nom de la class qui sera utilisé pour l’animation css « rotating ».
<div
class="rotating"
style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
>Rotate</div>
Puis ajoutons le code css suivant ou l’on défini une animation « rotating ».
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 2s linear infinite;
}
L’animation va de 0 à 360 degrés.
animation: rotating 2s linear infinite; => on défini le nom de l’animation, la durée (2 secondes),
le type d’accélération (linear) qui permet d’être régulier,
et infinite qui permet de reproduire l’animation à l’infini.