Images qui tournent

[Feuille d'Or]

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 (;

[Self]

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 .

[Feuille d'Or]

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 =/

[Self]

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 .

[Feuille d'Or]

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

[Self]

Hey cela devrais pourtant essayez avec un id ?

Code:

<img id="MON ID" src"LIEN DE MON IMAGE"></img>

 

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 .

[Feuille d'Or]

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

[MlleAlys]

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 ^^

[Self]

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  .

Cordialement .

[MlleAlys]

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

[Feuille d'Or]

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 ^^ ♥