How to rotate an HTML div element 90 degrees using JavaScript ?
An element can be rotated 90 degrees by using the transform property. This property is used to move, rotate, scale, and others to perform various kinds of transformation to elements.
Approach
- The rotate() transformation function can be used as the value to rotate the element.
- It takes one parameter that defines the rotation angle. The rotation angle consists of two parts, the value of the rotation followed by the unit of rotation.
- The unit can be defined in degrees (deg), gradients (grad), radians (rad), and turns.
- To rotate by 90 degrees any of the units can be used with their corresponding values.
- 90 degrees would equal t 100 gradient or 0.25 turns. Applying this property to the required element would rotate it by 90 degrees.
Syntax:
// Using JavaScript
element.style.transform = 'rotate(90deg)';
Example: The example uses a rectangle and one side of a border to explain the rotation.
html
<!DOCTYPE html> <html> <head> <title> How to rotate an HTML div element 90 degrees using JavaScript ? </title> <style> .box { height: 250px; width: 150px; border-right: 5px solid; background-color: lightgreen; } </style> </head> <body> <h1 style="color: green"> w3wiki </h1> <b> How to rotate an HTML div element in 90 degrees? </b> <p> Click on the button below to rotate the element by 90 degress. </p> <div class="box"></div> <button onclick="rotateElem()"> Rotate by 90 degrees </button> <script type="text/javascript"> function rotateElem() { document.querySelector('.box').style.transform = 'rotate(90deg)'; } </script> </body> </html> |
Output:
Output
Contact Us