Rotate en Css
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Rotate en Css
Bonjour forumactif!
Voila, je ne savais pas où poster mon message, alors je viens ici demander une petite aide.
Ce n'est pas super important mais j'aimerais quand même savoir comment l'ont fait une rotation sur les images.
Je ne veux pas que l'image soit directement sous le "rotate", j'aimerais qu'elle soit d'abord normale et seulement quand le curseur est dessus qu'elle face sa petite rotation.
J'ai essayé de chercher sur plusieurs site, même anglais, mais rien n'y fait, ça ne fonctionne pas...
Est-ce que quelqu'un serait répondre à ma question?
Merci d'avance en tout cas, je vous souhaites une bonne fête de Pâques!
Bonne fin de journée.
Voila, je ne savais pas où poster mon message, alors je viens ici demander une petite aide.
Ce n'est pas super important mais j'aimerais quand même savoir comment l'ont fait une rotation sur les images.
Je ne veux pas que l'image soit directement sous le "rotate", j'aimerais qu'elle soit d'abord normale et seulement quand le curseur est dessus qu'elle face sa petite rotation.
J'ai essayé de chercher sur plusieurs site, même anglais, mais rien n'y fait, ça ne fonctionne pas...
Est-ce que quelqu'un serait répondre à ma question?
Merci d'avance en tout cas, je vous souhaites une bonne fête de Pâques!
Bonne fin de journée.
Val'
Dernière édition par Valendium le Mar 10 Avr 2012 - 17:04, édité 1 fois
Re: Rotate en Css
Bonjour,
Pour ce faire, il vous suffit d’utiliser le rotate seulement sur :hover ? Un petit exemple plus bas.
Élément rotatif au survol :
Pour ce faire, il vous suffit d’utiliser le rotate seulement sur :hover ? Un petit exemple plus bas.
Élément rotatif au survol :
- Code:
.élémentrotatif:hover {
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
-ms-transform:rotate(100deg);}
Dernière édition par Matriochka le Dim 8 Avr 2012 - 16:53, édité 1 fois
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Rotate en Css
Bonjour Matriochka ,
Merci de cette réponse très rapide, mais j'ai déjà essayé, ça ne fonctionne pas, ou alors je n'ai pas saisis :/
Enfin je le met en CSS et après, comment je le renvois aux images encore? Grâce à un div, un span?...
J'ai un peu de mal avec tout ça...
Merci de cette réponse très rapide, mais j'ai déjà essayé, ça ne fonctionne pas, ou alors je n'ai pas saisis :/
Enfin je le met en CSS et après, comment je le renvois aux images encore? Grâce à un div, un span?...
J'ai un peu de mal avec tout ça...
Re: Rotate en Css
Serait-il possible d’avoir les codes que vous avez utilisés pour vos tests ? HTML et CSS, évidemment. Vous avez sûrement fait une mauvaise manœuvre.
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Rotate en Css
Je me trompe surement dans toute la ligne en fait... V.V *pas douée*
Donc j'ai mis dans le CSS ::
Alors avant le test, j'ai fait comme ça, avec un bête rotate :
Mais une fois que j'ajoute ceci :
Ou est-ce que je me trompe docteur? ^^'
Merci beaucoup de vous occupez de mon cas ♥
Donc j'ai mis dans le CSS ::
- Code:
.élémentrotatif {
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
-ms-transform:rotate(100deg);}
.élémentrotatif: hover {
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
-ms-transform:rotate(20deg);}
Alors avant le test, j'ai fait comme ça, avec un bête rotate :
- Code:
<div class="bulle"> <img src="http://img15.hostingpics.net/pics/39243015copy.png" border="0" class="transparence" alt=""; width="100"; height:100px style="border-radius: 0px 0px 0px 0px; -moz-transform: rotate(4deg);"><span><table border="0"><tr><td align="left"><img src="http://img15.hostingpics.net/pics/890242vcfsj9lncopie.png"> </span></div></td></tr></table>
Mais une fois que j'ajoute ceci :
- Code:
<div class="élémentrotatif ">
Ou est-ce que je me trompe docteur? ^^'
Merci beaucoup de vous occupez de mon cas ♥
Re: Rotate en Css
Quelques petites erreurs, en effet.
Tout d’abord, dans votre CSS, n’oubliez pas que vous ne devez pas mettre d’espace à :hover. Il faut garder le pseudo-élément tel quel, collé au nom de l’élément.
Si vous voulez appliquer une rotation sur une image, il vous faut alors attribuer une class à cette image. Pas besoin d’ajouter une div, pour ce faire. Il suffit de procéder ainsi :
Tout d’abord, dans votre CSS, n’oubliez pas que vous ne devez pas mettre d’espace à :hover. Il faut garder le pseudo-élément tel quel, collé au nom de l’élément.
Si vous voulez appliquer une rotation sur une image, il vous faut alors attribuer une class à cette image. Pas besoin d’ajouter une div, pour ce faire. Il suffit de procéder ainsi :
- Code:
<img src="url_de_l’image.jpg" class="imagerotative">
- Code:
.imagerotative:hover {
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
-ms-transform:rotate(100deg);}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Rotate en Css
Merci ça marche =D !!
Par contre si je veux y mêler une infobulle ou bulle comme je l'avais fait pour mon tout premier test, c'est impossible?
Merci beaucoup!
Par contre si je veux y mêler une infobulle ou bulle comme je l'avais fait pour mon tout premier test, c'est impossible?
Merci beaucoup!
Re: Rotate en Css
Une infobulle, c’est possible également, pas de souci. Il faut simplement garder la class imagerotative sur l’image. Car c’est cet élément, et seulement celui-ci, sur lequel l’on veut appliquer le style.
Seulement, qu’entendez-vous par "une bulle" ?
Seulement, qu’entendez-vous par "une bulle" ?
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Rotate en Css
Je sais pas trop comment m'exprimer. Mais je vais tenter:
A la base ceci est une simple image (qui est un peu transparente), mais quand on met le curseur dessus, une autre photo apparait dans une infobulle, ici appelée bulle. La rotation est simple et ne bouge jamais.
Mais si je veux mélanger infobulle + rotation comme vous me l'avez donner, ça bug... °O°
A la base ceci est une simple image (qui est un peu transparente), mais quand on met le curseur dessus, une autre photo apparait dans une infobulle, ici appelée bulle. La rotation est simple et ne bouge jamais.
- Code:
<div class="bulle"> <img src="http://img15.hostingpics.net/pics/39243015copy.png" border="0" class="transparence" alt=""; width="100"; height:100px style="border-radius: 0px 0px 0px 0px; -moz-transform: rotate(4deg);"><span><table border="0"><tr><td align="left"><img src="http://img15.hostingpics.net/pics/890242vcfsj9lncopie.png"> </span></div></td></tr></table>
Mais si je veux mélanger infobulle + rotation comme vous me l'avez donner, ça bug... °O°
Re: Rotate en Css
Serait-il d’avoir un lien vers un topic ou un forum sur lequel vous avez effectué vos essais ?
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Rotate en Css
Bonjour,
Voila, en fait j'ai trouvé! Un très grand merci pour votre aide!
Bonne continuation \o
Voila, en fait j'ai trouvé! Un très grand merci pour votre aide!
Bonne continuation \o
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum