3

I was wondering if there is an easy way to rotate a div +90 degrees after clicking it and by clicking it next time it returns to 0 degrees (so that the div rotates -90 degrees). Since I couldn't find anything I was looking for your help. Thanks.

Yanlu
  • 325
  • 2
  • 3
  • 17
  • Can you please show us what you have tried? – adricadar Jun 12 '15 at 17:30
  • Might be a duplicate of http://stackoverflow.com/questions/3020904/how-to-rotate-a-div-using-jquery – Tim Wilson Jun 12 '15 at 17:36
  • 2
    If supporting IE < 9 is not a concern, [it could be achieved with pure CSS](http://stackoverflow.com/questions/21919044/css3-transition-on-click-using-pure-css/21919261#21919261). Here is a [demo](http://jsbin.com/tonukekesu/1/edit) – Hashem Qolami Jun 12 '15 at 17:37
  • you can also use : http://stackoverflow.com/questions/37452477/rotate-div-text-after-clicking-on-button-using-jquery-and-css – RAJNIK PATEL May 03 '17 at 09:35

2 Answers2

10

You could use toggleClass and apply css transform to that class:

$('button:first-of-type').on('click', ()=> $('#rotate').toggleClass('rotated'));

const btn = document.querySelector('button:nth-of-type(2)');
const block2 = document.querySelector('#rotate2');

btn.addEventListener('click', ()=>block2.classList.toggle('rotated'));
body {text-align: center;}
#rotate, #rotate2 {
  width: 100px;
  height: 100px;
  background: red;
  border-top: 10px solid black;
  transition: transform .2s ease;
  margin: 20px auto;
  color: #fff;
}

.rotated { 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>rotate block</button>

<div id="rotate">jQuery</div>

<button>rotate block</button>

<div id="rotate2">Vanilla</div>
prettyInPink
  • 3,291
  • 3
  • 21
  • 32
  • Thanks, that was excactly what I was looking for! I made it a little bit smoother with CSS3 `transition` For example: `-webkit-transition: all 1s ease;` [Fiddle](https://jsfiddle.net/btdoxjf6/2/) – Yanlu Jun 12 '15 at 20:09
  • Great, happy to help. Instead of adding 'all', you can also add the transition to the transform only: `#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; }` – prettyInPink Jun 13 '15 at 00:55
  • It is probably the best solution without using any plug-ins or function. – Kunj Dec 01 '17 at 11:39
3

You need to use CSS for rotating the div. And for +-90 you have to add/remove to the div, this can be easy achieved with toggleClass. Adding this behaviour inside a click event will result something like below.

$('.square').click(function() {
    $(this).toggleClass('rotate-90');
});
.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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square">
  
</div>
adricadar
  • 9,971
  • 5
  • 33
  • 46