Faire tourner une image en continue avec du CSS
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Faire tourner une image en continue avec du CSS
Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://mazerunnerforum.forumactif.fr/
Description du problème
BonjourAprès quelques recherches infructueuses, je me tourne vers vous. Je suis en train de coder une page html, pour la maintenance prochain de mon forum. Afin d'ajouter un peu d'animation à cette page, je cherche le moyen d'animer l'image ci-dessous. J'aimerais que cette dernière puisse tourner en continue sur elle-même.
Code : https://i.servimg.com/u/f86/19/15/12/98/circle10.png
Merci beaucoup pour votre aide, cordialement.
Horusbk
Dernière édition par horusbk le Mer 13 Avr 2016 - 21:43, édité 1 fois
Re: Faire tourner une image en continue avec du CSS
Bonjour,
C'est possible en css grâce aux propriétés d'animation, un peu de recherche sur le net vous permettra de trouver nombreux codes possibles, par exemple :
https://jsfiddle.net/MlleAlys/99ebg3fm/
Le code html pour l'image :
Le code css pour construire l'animation (appelée ici "spin") :
Le code css pour appliquer l'animation spin à l'image :
C'est possible en css grâce aux propriétés d'animation, un peu de recherche sur le net vous permettra de trouver nombreux codes possibles, par exemple :
https://jsfiddle.net/MlleAlys/99ebg3fm/
Le code html pour l'image :
- Code:
<img class="tourne" src="http://i86.servimg.com/u/f86/19/15/12/98/circle10.png" />
Le code css pour construire l'animation (appelée ici "spin") :
- Code:
@-moz-keyframes spin {
100% { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(-360deg); }
}
@keyframes spin {
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
Le code css pour appliquer l'animation spin à l'image :
- Code:
.tourne {
-webkit-animation: spin 1.5s linear infinite;
-moz-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Faire tourner une image en continue avec du CSS
Merci MlleAlys
J'aurais néanmoins une petite question. Est-il possible d'intégrer me CSS ci-dessus directement dans le code HTML de la sorte :
Cordialement,
horusbk
J'aurais néanmoins une petite question. Est-il possible d'intégrer me CSS ci-dessus directement dans le code HTML de la sorte :
- Code:
<img style="..." src="http://i86.servimg.com/u/f86/19/15/12/98/circle10.png" />
- Code:
@-moz-keyframes spin {
100% { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(-360deg); }
}
@keyframes spin {
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
Cordialement,
horusbk
Re: Faire tourner une image en continue avec du CSS
pour la deuxième partie, oui c'est possible :
Mais pas pour la première partie.
Une autre possibilité :
Après ça dépend également de l'endroit où vous souhaitez afficher l'image.
- Code:
<img style="-webkit-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;" src="http://i86.servimg.com/u/f86/19/15/12/98/circle10.png" />
Mais pas pour la première partie.
Une autre possibilité :
- Code:
<img class="tourne" src="http://i86.servimg.com/u/f86/19/15/12/98/circle10.png" />
<style>
@-moz-keyframes spin {
100% { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(-360deg); }
}
@keyframes spin {
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
.tourne {
-webkit-animation: spin 1.5s linear infinite;
-moz-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
</style>
Après ça dépend également de l'endroit où vous souhaitez afficher l'image.
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Faire tourner une image en continue avec du CSS
Merci MlleAlys,
Du coup sujet résolu merci
Du coup sujet résolu merci
Sujets similaires
» faire une rotation continue sur une image en hover sur naviguation
» taille d'une image affichée sur le forum ne correspondant pas avec l'image originale
» Faire afficher une image avec un lien déjà en place dans le formulaire
» comment faire pour faire défiler une image dans le rang
» Faire glisser une image pour faire apparaitre un texte.
» taille d'une image affichée sur le forum ne correspondant pas avec l'image originale
» Faire afficher une image avec un lien déjà en place dans le formulaire
» comment faire pour faire défiler une image dans le rang
» Faire glisser une image pour faire apparaitre un texte.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum