Rotation image CSS XHTML
Résolu/Fermé
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.
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.
A voir également:
- Css rotate
- Css download - Télécharger - HTML
- Background color css ✓ - Forum CSS
- Css premier plan ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum CSS
- Enlever trait sous un lien href ✓ - Forum Webmastering
7 réponses
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
Pour le css on va utiliser ce code là
Bien sur on peut changer la durée et le degré de mouvement de l'animation
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
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.
vignemail1
Messages postés
1246
Date d'inscription
vendredi 8 octobre 2004
Statut
Contributeur
Dernière intervention
13 septembre 2019
259
10 juil. 2008 à 11:06
10 juil. 2008 à 11:06
Hmmm, je pense pas cela faisable sur tous les navigateurs sauf si c'est fait en flash
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
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
vignemail1
Messages postés
1246
Date d'inscription
vendredi 8 octobre 2004
Statut
Contributeur
Dernière intervention
13 septembre 2019
259
10 juil. 2008 à 11:34
10 juil. 2008 à 11:34
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
Le truc c'est juste de changer la source de l'image lors d'un :hover ou d'un onmouseover
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Flohti
Messages postés
162
Date d'inscription
mercredi 25 juillet 2007
Statut
Membre
Dernière intervention
7 février 2010
15
25 août 2008 à 16:58
25 août 2008 à 16:58
Salut,
Solution ?!?
Merci
Solution ?!?
Merci
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")
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")