Comment faire une rotation 180° d'une div au clic

Comment faire une rotation de 180° d'une div (appelée div id"fleche"></div> ) au clic de cette div merci :)

En CSS :

Code:

---

transform: rotate(180deg)

---

Ne reste plus qu'à appliquer cette règle au clic, par exemple en ajoutant une classe à l'élément.

Bonjour,

(Avec jQuery)

Code:

---

1 2 3 4 5

.rotate{ transform-origin: 50% 50%; transform: rotateY( 180deg ); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); }

---

Code:

---

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

Code:

---

1 2 3 4 5

.rotate{ transform-origin: 50% 50%; transform: rotateY( 180deg ); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); }

---

donc pas de problème dessus.

et le JS :

Code:

---

1 2 3

$(".cadre").click(function(){ $(".fleche").toggleClass("rotate"); });

---

Normalement ça devrait fonctionner.

Quel est le code HTML ?

le code html c'est :

Code:

---

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

Code:

---

$(".fleche").toggleClass("rotate");

---

par

Code:

---

$(this).find(".fleche").toggleClass("rotate");

---

Merci beaucoup ! j'ai tout ce qui me fallait. Continuez comme ça c'est vraiment cool ;)