Translate et transition
tak
-
tak -
tak -
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.
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:
- Translate et transition
- Google translate - Accueil - Services en ligne
- Google translate français arabe - Télécharger - Traduction
- Désactiver google translate - Guide
- Telecharger google translate pour pc - Télécharger - Traduction
- Transition imovie télécharger - Télécharger - TV & Vidéo
5 réponses
salut, essaye :
bonne soirée
¸,ø¤º°'°º¤ø,¸¸,ø¤º° *?((¯°·._.* LÖBÖTÖ *._.·°¯))?* °º¤ø,¸¸,ø¤º°'°º¤ø,¸
#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Ö *._.·°¯))?* °º¤ø,¸¸,ø¤º°'°º¤ø,¸
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.
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.
Salut, tu avais mis
#header #imgone:hover{
il aurait fallu mettre :
header #imgone:hover{
sinon pour la modification :
#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>
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 ?
