Translate et transition

Fermé
tak - 20 mai 2014 à 17:01
 tak - 21 mai 2014 à 15:11
Bonjour,


j'essaie de faire "bouger" une image grâces aux transitions et translate mais ça ne marche pas...
Voici le code html :
<div id="header">
<a href="#"><img src="logo.png" alt="" title="" id="imgone"/></a>

et le css hover pour que des que l on passe avec la souris l image bouge :
#header #imgone:hover{
transform : rotate(540deg);
transition-duration : 3s;
transition-delay : 0s;
}

Si vous pouvez me dire pourquoi ça ne marche pas... Merci.
A voir également:

5 réponses

salut, essaye :

#imgone:hover {
    transition: transform 3s;
    -moz-transition: -moz-transform 3s;
    -webkit-transition: -webkit-transform 3s;
    -ms-transition: -ms-transform 3s;
    -o-transition: -o-transform 3s;
    -moz-transform: rotate(540deg);
    -webkit-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    transform: rotate(540deg);
   }

bonne soirée
¸,ø¤º°'°º¤ø,¸¸,ø¤º° *?((¯°·._.* LÖBÖTÖ *._.·°¯))?* °º¤ø,¸¸,ø¤º°'°º¤ø,¸
0
Super merci beaucoup ca marche !!! Par contre est il possible de savoir pourquoi cela ne marchait pas avec mon ancien code ? Un collegue avait le meme et ca marchait :)

Aussi dans le même style je voudrais que des lorsque je surpasse une image avec la souris l'image devienne plus clair, j'ai donc utilisé tout simplement un opacity dans un hover mais est ce qu il existe un moyen de le faire aussi avec des translate/transitions ? merci.
0
Utilisateur anonyme
21 mai 2014 à 11:12
Salut, tu avais mis

#header #imgone:hover{

il aurait fallu mettre :

header #imgone:hover{

sinon pour la modification :

<style type="text/css">
			#imgone {
				transition: transform 3s, opacity 1s;
				-moz-transition: -moz-transform 3s, opacity 1s;
				-webkit-transition: -webkit-transform 3s, opacity 1s;
				-ms-transition: -ms-transform 3s, opacity 1s;
				-o-transition: -o-transform 3s, opacity 1s;
			}
			#imgone:hover {
				-moz-transform: rotate(540deg);
				-webkit-transform: rotate(540deg);
				-ms-transform: rotate(540deg);
				-o-transform: rotate(540deg);
				transform: rotate(540deg);
				opacity: 0.5;
			}
		</style>

0
Ah oui en effet merci beaucoup pour tes réponses ça m'aide beaucoup !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Une dernière chose j'oubliais, on m'a donné un fond d'écran avec des étoiles simples, et lorsque la page est redimensionné les étoile du fond d'écran doivent bouger en sens inverse et je ne vois pas du tout comment faire et ne sais pas si je dois utiliser des transitions ou autres, avez vous une idée ?
0