Rappel du premier message :

Mission #7 - Animation, image qui tourne [Initié]

Bonjour bande de moussaillon !

Je viens vous proposer pour cette septième mission de tourner de l'œil /pan. En fait, j'aimerais (plutôt que de vous voir vous tourner de l'œil) voir une image tourner.

Pour vous aider, nous avons une image comme ceci :



L'image est droite, cependant au survol de la souris, cette dernière fera un tour des aiguilles d'une montre (complet ou non). On arrivera à quelque chose comme ça au survol :




Comment peut-on réaliser cet effet de transition ? Quels problèmes peuvent se posent ? Quelles connaissances doit-on avoir ?
N'hésitez pas à participer à cette mission, vous n'êtes pas forcé de poster le résultat, vous pouvez simplement intervenir pour apporter le principe théorique de la réalisation de cet effet afin que tout le monde en discute !

Pour laisser une chance à tout le monde de participer, pensez à mettre votre code sous

Code:

[hide][/hide]

Bon ben c'est nettement moins chouette que ce que j'ai pu voir dans le topic mais bon... Je suis surtout en quête de conseils et je pense que le meilleur moyen de s'améliorer est encore de faire des tests, même peu concluants ^^







Je ne comprends pas de quelle manière on peut avoir un retour homogène u.u Et mon bidule bug dès que la souris n'est plus sur l'image. Bref, beaucoup de défauts dans ce mini bout de truc ^^'

Bonjour ! J'essaie, moi aussi !






Hourra ! Après quelques essais plus ou moins fructueux, mission accomplie

xLittleRainbow > Tu as totalement raison, il faut poster, s'entrainer, etc au maximum :)
Faut pas avoir peur de pas totalement réussir, on a tous commencé :p

xLittleRainbow a écrit:Je ne comprends pas de quelle manière on peut avoir un retour homogène u.u

Tu as défini ta transition dans le CSS au survol (^-^). Il faut mettre la transition sur l'élément (pas sur le :hover) et ça sera bon ♥
Sinon tu lui dit "Met la transition quand je survole". Donc quand il ne survole pas → Pas de transition → Pas de retour fluide.

xLittleRainbow a écrit:Et mon bidule bug dès que la souris n'est plus sur l'image.

Ici, la réponse de ton problème se trouve... Dans ta question
Dans ton CSS, tu as défini que le déplacement se fait quand on survole l'image. Donc quand l'image a beaucoup bougé vers la droite on ne la survole plus. Donc l'effet au survol s'annule :p

Petite note, attention aux retours à la ligne dans le style quand on est dans un message. Ils vont créer des balises br qui font bugger le CSS. Par exemple ici, juste après "box-shadow" :

Code:

.bg_white:hover{box-shadow<br />:0 0 4px rgb(0,0,0);}

Bravo Lokiaryu :)
J'ai vu que tu as mis beaucoup de préfixes navigateurs, si tu veux je t'invite à lire ce tuto → Savoir quand utiliser des préfixes CSS
Tu verras quand maintenant plusieurs préfixes sont obsolètes, cela allègera ton code de les enlever (^-^)

Oh, merci beaucoup pour le lien ! ♥
Je pensais tout bêtement qu'il fallait toujours en mettre le plus possible, ehehe ça allège effectivement grandement le tout ! ^-^

J'avais jamais réussi à comprendre ce que ça pouvait bien changer de mettre la transition dans la balise ou dans le hover. Tu viens d'éclairer ma lanterne pour une question de longue date donc merci o/
Faudra que je ressente ça pour voir si ça fonctionne mieux ^.^