Bonsoir. J'ai voulu reproduire l'effet d'une image qui tourne, mais il me semblait que c'était la fonction "transition" qui permettait de la faire tourner complément au passage de la souris, mais cela ne fonctionne même pas. Je ne comprend pourtant pas. J'ai effectué le même codage, ou peut-être fallait également y mettre la rotation. J'en ai aucune idée, mais ça me perturbe. Je vous laisse mon codage. Je vous remercie de votre aide (:

Code:

.histoireperso {
  width: 130px;
  border-radius: 50%;
}

.histoireperso:hover {
  transition: all 06s;
 -moz-transition: all 06s;
 -o-transition: all 06s;
 -webkit-transition: all 06s;
}

Code:

<img src="http://04.img.v4.skyrock.net/4276/79414276/pics/3125302439_1_7_NvMwTPkb.gif" class="histoireperso">

Bonjour!
J'avais la nette impression qu'il y avait un tutoriel ici-même sur la rotation d'image, mais je n'arrive plus à le trouver... Enfin, voici ma solution, en attendant que quelqu'un de peut-être un peu plus qualifié puisse répondre.

En gros, vous n'avez pas de rotation pour votre image parce que vous n'indiquez nulle part que vous voulez que votre image fasse une rotation. Vous indiquez seulement à quelle vitesse vous voulez que les changements au passage de la souris se produisent.
Pour ma part, quand je veux qu'une image prenne un angle différent j'utilise ceci:

Code:

  -webkit-transform: rotate(xxdeg);
  -moz-transform: rotate(xxdeg);
  -o-transform: rotate(xxdeg);
  -ms-transform: rotate(xxdeg); /* IE9 */

Évidemment, les xx sont à remplacer par le nombre de degrés désiré (normalement entre -360 et 360). Je ne sais pas si cette façon de faire est toujours valide, mais en cherchant sur google un peu, c'est ce que je trouve. Il y a bien une propriété en CSS3 qui sert à ce genre d'effet, mais pour le moment, aucun navigateur ne la prend en compte, alors bon, ce n'est pas la solution idéale. Ah! Et bien sûr, la partie de code que je viens de fournir est à inclure dans la partie css intitulée .histoireperso:hover.

En espérant avoir pu aider, au moins temporairement.

Pon&Zi a écrit:

Bonjour!
J'avais la nette impression qu'il y avait un tutoriel ici-même sur la rotation d'image, mais je n'arrive plus à le trouver... Enfin, voici ma solution, en attendant que quelqu'un de peut-être un peu plus qualifié puisse répondre.

Pour info il a été temporairement déplacé du côté des codeurs pour une légère refonte du code. Au vu de son avancée je dirais qu'il ne va pas tarder à être replacé dans la liste des codes

Sinon c'est effectivement cela, avec la propriété générique à la fin de la liste comme ceci :

Code:

-webkit-transform: rotate(xxdeg);
-moz-transform: rotate(xxdeg);
-o-transform: rotate(xxdeg);
-ms-transform: rotate(xxdeg); /* IE9 */
transform: rotate(xxdeg);

Rien à dire de plus sinon, cela devrait résoudre ton problème Kyou