Faire tourner une image

https://www.aspirateur-central.com

aspifrance

aspifrance

Messages : 14
Inscrit le : 27/01/2009 00:00

Bonjour,

je souhaite faire tourner une image en continue, j'ai regardé sur internet, sur des forums et honnêtement je suis perdu et novice ...
Quelqu'un pourrait-il me dire quoi ajouter dans le CSS et quoi ajouter à mon image en html ?
Merci pour votre aide.
Domi

acb.distribution@orange.fr

overflo

overflo

Messages : 57
Inscrit le : mercredi, 10 août 2022

Hello,

Vous avez un exemple d'image sur une de vos pages ?

aspifrance

aspifrance

Messages : 14
Inscrit le : mardi, 27 janvier 2009

Bonjour, je ne l'ai pas encore mise en place, en fait, l'image c'est une roue qui pourrait ressembler à la roue de la fortune

acb.distribution@orange.fr

overflo

overflo

Messages : 57
Inscrit le : mercredi, 10 août 2022

D'accord. Le plus simple ça reste alors d'ajouter l'image dans un éditeur visuel et au moment de l'insertion, rajouter cette class :

overflo-rotation

Après, pour que l'image tourne dans le sens des aiguilles d'une montre, il faut rajouter dans le code CSS de votre site :

.overflo-rotation {
animation: 2s infinite linear overflo-rotation;
}

@keyframes overflo-rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}


Si vous voulez changer la vitesse de rotation, changez simplement dans le code CSS les "2s" (2 secondes) par le temps que vous voulez.

aspifrance

aspifrance

Messages : 14
Inscrit le : mardi, 27 janvier 2009

Bonjour et merci pour votre message, j'ai bien rajouté le code CSS à mon site, par contre lorsque je veux rajouter l'image, en dessous il y a
CSS class ID#
Est-ce bien là que je dois rajouter "overflo-rotation" ?
Si oui est-ce que c'est de cette façon ?
CSS class overflo ID# rotation

J'ai essayé les deux façons et ça ne fonctionne pas.

Merci pour votre aide.

acb.distribution@orange.fr

overflo

overflo

Messages : 57
Inscrit le : mercredi, 10 août 2022

Hello,

Il faut ajouter la class overflo-rotation telle quelle dans le champ class uniquement. Le champ ID doit rester vide. ;)

aspifrance

aspifrance

Messages : 14
Inscrit le : mardi, 27 janvier 2009

Ok, super, merci beaucoup, ça fonctionne.

acb.distribution@orange.fr