Discussion :

[infovect]

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

[SylvainPV]

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.

[Golgotha]

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.

[infovect]

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

[Golgotha]

Juste a remplacer : $(this).addClass("rotate"); par $(this).toggleClass("rotate");

[infovect]

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 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); 
}

donc pas de problème dessus.

et le JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Golgotha]

Normalement ça devrait fonctionner.

Quel est le code HTML ?