jQuery tourner div onclick +/-90

Je me demandais si il existe un moyen facile pour faire tourner un div +90 degrés après en cliquant dessus et en cliquant sur la prochaine fois qu'il retourne à 0 degrés (de sorte que la div tourne à 90 degrés).
Puisque je ne pouvais pas trouver ce que je cherchais pour votre aide. Merci.

Pouvez vous s'il vous plaît nous montrer ce que vous avez essayé?
Peut-être un doublon de stackoverflow.com/questions/3020904/...
Si le soutien de IE < 9 n'est pas un souci, il pourrait être réalisé avec de la pure CSS. Voici un démo
vous pouvez également utiliser : stackoverflow.com/questions/37452477/...

InformationsquelleAutor Yanlu | 2015-06-12

6

Vous pouvez utiliser toggleClass et d'appliquer le style css de transformation de cette classe:
```
$('#rotate').click(function(){
    $(this).toggleClass('rotated');
});
```
violon
```
.rotated { 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
```
- Merci, c'était exactement ce que je cherchais! Je l'ai fait un peu plus lisse avec CSS3 transition Par exemple: -webkit-transition: all 1s ease; Violon
- Grand, heureux de vous aider. Au lieu d'ajouter "tous", vous pouvez aussi ajouter de la transition à la transformation seulement: #rotate{ width: 100px; height: 100px; background: red; margin: 50px; text-align: center; -webkit-transition: transform 1s ease; -moz-transition: transform 1s ease; -ms-transition: transform 1s ease; -o-transition: transform 1s ease; transition: transform 1s ease; }
- C'est probablement la meilleure solution sans utiliser de plugins ou de la fonction.
InformationsquelleAutor battaboombattabaam

Vous avez besoin d'utiliser le CSS pour la rotation de la div. Et pour +-90 vous avez à ajouter/supprimer pour le div, cela peut être facilement réalisé avec toggleClass. L'ajout de ce comportement à l'intérieur d'un click manifestation permettra de quelque chose comme ci-dessous.

JS:

$('.square').click(function() {
    $(this).toggleClass('rotate-90');
});

CSS:

.square {
  width: 150px;
  height: 100px;
  background-color: red;
}

.rotate-90 { 
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square">
  
</div>

InformationsquelleAutor adricadar

Vous devez vous connecter pour publier un commentaire.