How to rotate an HTML div element 90 degrees using JavaScript ?

Last Updated : 20 Dec, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

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"> 
        GeeksforGeeks 
    </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

Next Article
How to add an element horizontally in Html page using JavaScript?
author
sayantanm19
Improve
Article Tags :

Similar Reads