faire une rotation continue sur une image en hover sur naviguation

[hippocampe]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 15/01/19
Lien du forum : http://escale-majuscule.forumactif.org/

Description du problème

J'ai utilisé cette astuce  : https://forum.forumactif.com/t246228-images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris
bonjour
J’aimerais changer et mettre une image ronde en hover qui tourne en permanence lorsqu’elle est survolée par la souris ( hover )
J’ai utilisé l’astuce navigation modifié au passage de la souris
J’ai trouvé pas mal de choses mais rien qui tourne en permanence
Si quelqu’un a une idée en css, je suis preneur
Merci
Voila mon css de mon icone d’accueil

Code:

/*IMAGE ACCUEIL*/
#i_icon_mini_index{
background-image:url('https://i.servimg.com/u/f32/11/94/15/08/accuei16.png'); /*image si la souris ne survole pas*/
width:100px; /*Largeur de l'image*/
height:100px; /*Hauteur de l'image*/
   border:1px solid #000;
background:yellow;
     transform: skew(10deg);
     -webkit-transform: skew(10deg);
  box-shadow: 3px 3px 3px blue;
}
#i_icon_mini_index:hover{
background-image:url('https://i.servimg.com/u/f32/11/94/15/08/accuei17.png'); /*image si la souris survole*/
width:100px; /*Largeur de l'image*/
height:100px; /*Hauteur de l'image*/
    border:1px solid #000;
background:#5eb2d9;
     transform: skew(-20deg);
     -webkit-transform: skew(-20deg);
    box-shadow: 3px 3px 3px red;
}


[Neptunia]

Bonjour ^^


Il y a bien la fonction rotate de la propriété transform mais elle necessite en argument une valeur en nombre de tours ou en angle (1 tour = 360 degrés) et l'animation finira tôt ou tard par s'arrêter.

Pourquoi ne pas simplement utiliser une image animée au format gif ?

[MasDan]

Bonjour Hippocampe,

Pour la rotation (à l'infini) d'une image au survol, remplacer votre code CSS par ceci

Code:

/*IMAGE ACCUEIL*/
#i_icon_mini_index {
  background: yellow;
  background-image: url('https://i.servimg.com/u/f32/11/94/15/08/accuei16.png'); /*image si la souris ne survole pas*/
  width: 100px; /*Largeur de l'image*/
  height: 100px; /*Hauteur de l'image*/
  border:1px solid #000;
  transform: skew(10deg);
  -webkit-transform: skew(10deg);
  box-shadow: 3px 3px 3px blue;
}
#i_icon_mini_index:hover {
  background:#5eb2d9;
  background-image:url('https://i.servimg.com/u/f32/11/94/15/08/accuei17.png'); /*image si la souris survole*/
  width:100px; /*Largeur de l'image*/
  height:100px; /*Hauteur de l'image*/
  border:1px solid #000;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  box-shadow: 3px 3px 3px red;
}
@-webkit-keyframes rotating {
  from { -webkit-transform: rotate(0deg); }
  to  { -webkit-transform: rotate(360deg); }
}
.rotating:hover {
  -webkit-animation: rotating 2s linear infinite;
}

La rotation est produite via les lignes 22 à 28 du code CSS.

Pour le HTML (non fournie à votre message), j'ai utiliser ceci.

Code:

<div id='i_icon_mini_index' class="rotating"></div>

Noter l'ajout de la classe rotating.

P.S.: J'ai utilisé vos images, donc pas d'image ronde.

[hippocampe]

Merci Masdan,
j'essaye ca dans la matinée et je repasse te donner des news

ps : concernant le html, j'en ai pas , voila pourquoi je n'ai pas mis le code

[hippocampe]

Merci Masdan et Neptunia aussi

Je clos