rotation image CSS XHTMLRésolu/Fermé

Question

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.

CLeM KuSaLa · Accepted Answer

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

vignemail1 · Answer

Hmmm, je pense pas cela faisable sur tous les navigateurs sauf si c'est fait en flash

vignemail1 · Answer

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

guillaumesk850 · Answer

merci beaucoup, je viens a l'instant de réglé mon problème, mon menu est fin prêt :)
encore merci

Flohti · Answer

Salut,

Solution ?!?

Merci

ptikon · Answer

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.

willoche · Answer

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")

Rotation image CSS XHTML

7 réponses

Discussions similaires

Newsletters