Rotation image CSS XHTML
Résolu
guillaumesk850
-
CLeM KuSaLa -
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.
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
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
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.
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
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
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")
