Rotate en Css

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Rotate en Css

Message par Valendium Dim 8 Avr 2012 - 16:24

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.

Val'


Dernière édition par Valendium le Mar 10 Avr 2012 - 17:04, édité 1 fois
avatar

Valendium
**

Messages : 96
Inscrit(e) le : 13/06/2011

http://enchantedtime.taguilde.net/
Valendium a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Matriochka Dim 8 Avr 2012 - 16:29

Bonjour,

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);}
Valeurs à modifier selon votre envie.


Dernière édition par Matriochka le Dim 8 Avr 2012 - 16:53, édité 1 fois
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Valendium Dim 8 Avr 2012 - 16:39

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...
avatar

Valendium
**

Messages : 96
Inscrit(e) le : 13/06/2011

http://enchantedtime.taguilde.net/
Valendium a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Matriochka Dim 8 Avr 2012 - 16:40

Serait-il possible d’avoir les codes que vous avez utilisés pour vos tests ? Smile HTML et CSS, évidemment. Vous avez sûrement fait une mauvaise manœuvre.
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Valendium Dim 8 Avr 2012 - 16:51

Je me trompe surement dans toute la ligne en fait... V.V *pas douée*

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 ">
Rien ne s'affiche..

Ou est-ce que je me trompe docteur? ^^'

Merci beaucoup de vous occupez de mon cas ♥

avatar

Valendium
**

Messages : 96
Inscrit(e) le : 13/06/2011

http://enchantedtime.taguilde.net/
Valendium a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Matriochka Dim 8 Avr 2012 - 16:58

Quelques petites erreurs, en effet. Smile

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">
Ensuite, dans votre CSS, vous aurez quelque chose comme :
Code:
.imagerotative:hover {
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
-ms-transform:rotate(100deg);}
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Valendium Dim 8 Avr 2012 - 17:17

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!
avatar

Valendium
**

Messages : 96
Inscrit(e) le : 13/06/2011

http://enchantedtime.taguilde.net/
Valendium a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Matriochka Dim 8 Avr 2012 - 17:21

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" ? Smile
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Valendium Dim 8 Avr 2012 - 17:26

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.

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°
avatar

Valendium
**

Messages : 96
Inscrit(e) le : 13/06/2011

http://enchantedtime.taguilde.net/
Valendium a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Matriochka Dim 8 Avr 2012 - 18:04

Serait-il d’avoir un lien vers un topic ou un forum sur lequel vous avez effectué vos essais ?
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rotate en Css

Message par Valendium Mar 10 Avr 2012 - 17:03

Bonjour,


Voila, en fait j'ai trouvé! Un très grand merci pour votre aide! Smile
Bonne continuation \o
avatar

Valendium
**

Messages : 96
Inscrit(e) le : 13/06/2011

http://enchantedtime.taguilde.net/
Valendium a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum