Rotation image CSS XHTML

Résolu
guillaumesk850 -  
 CLeM KuSaLa -
Bonjour,
je suis un train de me faire un site internet en XHTML, et mon menu style téléphone portable affiche des petits icones auxquels j'aimerais ajouté une rotation.
c'est a dire que j'aimerai que lorsque ma souris va sur un de ces icônes, cet icône fasse une rotation de quelques degrés.
j'avais commencé a utiliser un img : hover dans le CSS mais comment lui demander de faire pivoter l'image ??

merci d'avance.
Configuration: Windows XP
Firefox 2.0.0.15

7 réponses

  1. CLeM KuSaLa
     
    Une solution simple en HTML et CSS

    Le code dans le html est simple, on va utiliser la class img que l'on a automatiquement en faisant
    <img src="...">


    Pour le css on va utiliser ce code là
    img {
    -moz-transition-duration:4s;
    -moz-transition-timing-function:linear;
    -webkit-transition-duration:4s;
    -webkit-transition-timing-function:linear;
    transition-duration:4s;
    transition-timing-function:linear;
    }
    
    img:hover {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    


    Bien sur on peut changer la durée et le degré de mouvement de l'animation
    16
  2. ptikon
     
    Comme d'hab encore un radin qui demande de l'aide et qui n'a pas l'inteligence de se dire que quelqu'un pourrait avoir le même problème.
    2
  3. vignemail1 Messages postés 1262 Statut Contributeur 259
     
    Hmmm, je pense pas cela faisable sur tous les navigateurs sauf si c'est fait en flash
    0
    1. guillaumesk850
       
      merci pour votre réponse,
      j'ai trouvé un site qui montre que cela est possible (enfin je pense)
      http://le-site-du-skateboard.com/ vous verrez vers la fin du site on voit un téléphone orange qui bouge des que l'on se trouve dessus .....
      merci
      0
  4. vignemail1 Messages postés 1262 Statut Contributeur 259
     
    C'est juste un img:hover qui change l'image. Moi je pensais plutôt à une image qui tourne progressivement, mais bon. Si c'est ce que tu cherches, c'est juste un :hover en CSS ou un onmousover en javascript
    Le truc c'est juste de changer la source de l'image lors d'un :hover ou d'un onmouseover
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. guillaumesk850
     
    merci beaucoup, je viens a l'instant de réglé mon problème, mon menu est fin prêt :)
    encore merci
    0
  7. Flohti Messages postés 165 Statut Membre 15
     
    Salut,

    Solution ?!?

    Merci
    0
  8. willoche
     
    bonsoir

    Pour votre problème plusieurs solution s'offre a vous

    - 1 création d'un .GIF (animation d'image basse résolution)

    - 2 le faire en flash (utilisation de flash pas compliquer en soit mais demande
    un peu entrainement et la connaissance du langage de prog "action-script")

    - 3 un :hover en CSS (effet de remplacement dimage au survol du cursor)

    - 4 PHP et la plus optimal et ed loin ma preferer (nescessite d'utilisé un interpreteur php et oblige a develloper les site en php")
    -1