Comment faire une rotation de 180° d'une div (appelée div id"fleche"></div> ) au clic de cette div merci
Comment faire une rotation de 180° d'une div (appelée div id"fleche"></div> ) au clic de cette div merci
En CSS :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part transform: rotate(180deg)
Ne reste plus qu'à appliquer cette règle au clic, par exemple en ajoutant une classe à l'élément.
One Web to rule them all
Bonjour,
(Avec jQuery)
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 .rotate{ transform-origin: 50% 50%; transform: rotateY( 180deg ); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); }
Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 $("#fleche").click(function(){ $(this).addClass("rotate"); });
L'exemple sur jsfidle.
Merci beaucoup ça marche bien mais comment le faire répéter à chaque clic ?
Parce qu'une fois que je clic sur l’élément, il se retourne mais si je reclic dessus il ne se retourne pas. Comment faire SVP merci
Juste a remplacer : $(this).addClass("rotate"); par $(this).toggleClass("rotate");
Merci ça me permet de bien avancer, j'aimerai encore l'améliorer mais ça ne marche pas.
Alors je vous explique : ma flèche ( <div class="fleche"></div> ) est dans un cadres ( <div class="cadre"></div> )
A chaque fois que l'on clic sur le cadre la flèche se retourne à 180° :
J'ai essayé ceci mais ça ne marche pas :
le css est bien
donc pas de problème dessus.
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 .rotate{ transform-origin: 50% 50%; transform: rotateY( 180deg ); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); }
et le JS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 $(".cadre").click(function(){ $(".fleche").toggleClass("rotate"); });
Normalement ça devrait fonctionner.
Quel est le code HTML ?
le code html c'est :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <div class="cadre"> <div class="fleche"></div> </div> <div class="cadre"> <div class="fleche"></div>
ça marche bien dans ce cas mais toutes les flèches tournent alors que je voudrais seulement la flèche dans le cadre ou j'ai cliqué.
Il faut remplacer
par
Code : Sélectionner tout - Visualiser dans une fenêtre à part $(".fleche").toggleClass("rotate");
Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).find(".fleche").toggleClass("rotate");
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum
Merci beaucoup ! j'ai tout ce qui me fallait. Continuez comme ça c'est vraiment cool
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager