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 ?

[infovect]

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

[Bovino]

Il faut remplacer

Code :

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

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

par

Code :

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

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

[infovect]

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