Rotate a div using javascript

by

To rotate a DIV we can add some CSS that, well, rotates the DIV using CSS transform rotate.

To toggle the rotation we can keep a flag, a simple variable with a boolean value that tells us what way to rotate.

var rotated = false;

document.getElementById('button').onclick = function() {
    var div = document.getElementById('div'),
        deg = rotated ? 0 : 66;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.mozTransform    = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)'; 

    rotated = !rotated;
}


var rotated = false;

document.getElementById('button').onclick = function() {
    var div = document.getElementById('div'),
        deg = rotated ? 0 : 66;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.mozTransform    = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)'; 
    
    rotated = !rotated;
}
#div {
    position:relative; 
    height: 200px; 
    width: 200px; 
    margin: 30px;
    background: red;
}
<button id="button">rotate</button>
<br /><br />
<div id="div"></div>

To add some animation to the rotation all we have to do is add CSS transitions

div {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}


var rotated = false;

document.getElementById('button').onclick = function() {
    var div = document.getElementById('div'),
        deg = rotated ? 0 : 66;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.mozTransform    = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)'; 
    
    rotated = !rotated;
}
#div {
    position:relative; 
    height: 200px; 
    width: 200px; 
    margin: 30px;
    background: red;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
<button id="button">rotate</button>
<br /><br />
<div id="div"></div>

Another way to do it is using classes, and setting all the styles in a stylesheet, thus keeping them out of the javascript

document.getElementById('button').onclick = function() {
    document.getElementById('div').classList.toggle('rotated');
}


document.getElementById('button').onclick = function() {
    document.getElementById('div').classList.toggle('rotated');
}
#div {
    position:relative; 
    height: 200px; 
    width: 200px; 
    margin: 30px;
    background: red;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#div.rotated {
    -webkit-transform : rotate(66deg); 
    -moz-transform : rotate(66deg); 
    -ms-transform : rotate(66deg); 
    -o-transform : rotate(66deg); 
    transform : rotate(66deg); 
}
<button id="button">rotate</button>
<br /><br />
<div id="div"></div>

More Related Contents:

  1. Rotate the elements in an array in JavaScript
  2. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
  3. Is there a way to calculate 3D rotation on X and Y axis from a 4×4 matrix
  4. rotate a .gif image on google maps api v3?
  5. How to calculate rotation in 2D in Javascript
  6. Javascript function to Rotate a base 64 image by X degrees and return new base64
  7. Calculate the bounding box’s X, Y, Height and Width of a rotated element via JavaScript
  8. 3D point rotation algorithm
  9. How do I add a delay in a JavaScript loop?
  10. FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory in Ionic 3
  11. When serving JavaScript files, is it better to use the application/javascript or application/x-javascript
  12. How to set locale in DatePipe in Angular 2?
  13. JavaScript – why Array.prototype.fill actually fills a “pointer” of object when filling anything like ‘new Object()’
  14. Applying className/onClick/onChange not working on Custom React Component
  15. orderBy multiple fields in Angular
  16. ES6 Promises – something like async.each?
  17. Mongoose the Typescript way…?
  18. How to ONLY trigger parent click event when a child is clicked
  19. Can’t type in React input text field
  20. UI-router interfers with $httpbackend unit test, angular js
  21. How can I detect when a new element has been added to the document in jquery?
  22. onchange event not fire when the change come from another function
  23. Firebase stop listening onAuthStateChanged
  24. Top-level await does not work with node 14.13.-
  25. Angular $http is sending OPTIONS instead of PUT/POST
  26. Efficient way to implement Priority Queue in Javascript?
  27. How to remove square brackets in string using regex?
  28. Getting a diff of two json-objects
  29. Get values from an object in JavaScript [duplicate]
  30. Object Oriented Javascript best practices? [closed]

Leave a Comment