Images qui tournent

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Images qui tournent

Message par Feuille d'Or Ven 9 Aoû 2013 - 11:59

Bonjour,
Aujourd'hui je souhaitais vous demander comment on faisait pour faire des images qui tournent quand on passe la souris dessus, car oui plusieurs j'ai vu ça sur des messages d'accueil, et je dois dire que je trouve ça très classe ^^

Merci d'avance pour celle ou celui qui saura me répondre (;


Dernière édition par Feuille d'Or le Mar 13 Aoû 2013 - 12:03, édité 1 fois
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images qui tournent

Message par Self Ven 9 Aoû 2013 - 15:32

Bonjour ^^ .

Il suffit d'utilisé un peut de CSS comme cela:
Code:
img {
-moz-transition-duration:4s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:4s;
-webkit-transition-timing-function:linear;
transition-duration:4s;/*définie le temps de la transition*/
transition-timing-function:linear;/*définie le style de transition*/
}
img:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);/*définie la transformation(pour ici 360° de rotation)*/
}
Je vous l'accompagne d'un lien pour voir les nom des différente transition et leur effet: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-timing-function2

Cordialement Smile.
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images qui tournent

Message par Feuille d'Or Sam 10 Aoû 2013 - 18:14

Oki merci mais juste où dois-je mettre le lien de l'image (:
Merci, cordialement (:
Edit: et j'ai essayé sur un message d'accueil ça ne fonctionne pas =/
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Images qui tournent

Message par Self Sam 10 Aoû 2013 - 19:24

Bonjour ^^.

Il faut ajouté une class à votre image, par exemple si le code de votre image est
Code:
<img src"LIEN DE MON IMAGE"></img>
Il faudra transformer le code comme sa:
Code:
<img class="MA CLASS" src"LIEN DE MON IMAGE"></img>
Et dans le CSS sa donnera:
Code:
.MA CLASS {
 -moz-transition-duration:4s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:4s;
-webkit-transition-timing-function:linear;
transition-duration:4s;/*définie le temps de la transition*/
transition-timing-function:linear;/*définie le style de transition*/
}
.MA CLASS :hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);/*définie la transformation(pour ici 360° de rotation)*/
}
Cordialement Smile .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images qui tournent

Message par Feuille d'Or Sam 10 Aoû 2013 - 20:04

J'ai fais ce que vous m'avez dit mais ça ne marche pas =/
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images qui tournent

Message par Self Sam 10 Aoû 2013 - 21:14

Hey cela devrais pourtant essayez avec un id ?
Code:
<img id="MON ID" src"LIEN DE MON IMAGE"></img>
Ajout 
Code:
#MON ID {
-moz-transition-duration:4s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:4s;
-webkit-transition-timing-function:linear;
transition-duration:4s;/*définie le temps de la transition*/
transition-timing-function:linear;/*définie le style de transition*/
}
#MON ID :hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);/*définie la transformation(pour ici 360° de rotation)*/
}
Cordialement Smile .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images qui tournent

Message par Feuille d'Or Lun 12 Aoû 2013 - 9:54

Bonjour,
Mais c'est pas possible, je copie tout bien et ça ne marche pas, pourquoi??? :'(
Cordialement
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Images qui tournent

Message par MlleAlys Lun 12 Aoû 2013 - 13:30

Bonjour,
pour le code html de l'image, c'est dans une seule balise, et il manquant le = après src ^^. Et pour la class, il faudrait la mettre en un seul mot. Et, dernier point, dans le css la pseudo class :hover doit être collée au nom de la class ^^
J'ai fait des petits changements pour éviter ces erreurs, j'ai renommé la classe "rotation" :

code html à mettre dans le message d'accueil (il faut remplacer URL DE L'IMAGE x) ) :
Code:
<img class="rotation" src="URL DE L'IMAGE"/>
code css à mettre dans la feuille de style :
Code:
/*code rotation au passage de la souris*/

.rotation {
    -moz-transition-duration:4s;
    -moz-transition-timing-function:linear;
    -webkit-transition-duration:4s;
    -webkit-transition-timing-function:linear;
    transition-duration:4s; /*définit le temps de la transition*/
    transition-timing-function:linear; /*définit le style de transition*/
}
.rotation:hover {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg); /*définit la transformation (pour ici 360° de rotation)*/
}
/*fin code rotation*/
l'angle de rotation (ici 360°) ainsi que le temps mis par l'image pour le faire (ici 4 secondes) peuvent être changées ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images qui tournent

Message par Self Lun 12 Aoû 2013 - 13:47

MlleAlys a écrit:Bonjour,
pour le code html de l'image, c'est dans une seule balise, et il manquant le = après src ^^. Et pour la class, il faudrait la mettre en un seul mot. Et, dernier point, dans le css la pseudo class :hover doit être collée au nom de la class ^^
J'ai fait des petits changements pour éviter ces erreurs, j'ai renommé la classe "rotation" :
Merci MlleAlys.
le :hover chez moi coller ou non fonctionne :/.
Bref il faut que je fasse plus attention en ce moment oublié un = deux fois d'affiler c'est pas normale Sorry .

Cordialement Smile .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images qui tournent

Message par MlleAlys Lun 12 Aoû 2013 - 13:50

ah, chez moi quand c'était espacé ça ne fonctionnait pas... ^^"
Bref, dans le doute, mieux vaut coller alors Wink
(et oui, les fautes d'inattention je connais bien ça aussi ! xD)
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images qui tournent

Message par Feuille d'Or Mar 13 Aoû 2013 - 12:02

MERCI!!!!! Ca marche!!! (:
Au fait juste pour info par contre je changeais bien l'URL de l'image quand même (;
Mais sinon merci infiniment, je suis trop contente ^^ ♥
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum