How to create a moving div using JavaScript ?

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

Last Updated : 12 Jul, 2025

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

How to create a moving div using JavaScript ?

S

sayantanm19

Improve

Article Tags :

JavaScript

Similar Reads

How to create a moving div using JavaScript ?

In this article, we will learn to create a moving HTML div using JavaScript. The div will move left to right using HTML, CSS, and JavaScript. Approach: We have to create an HTML div and add some CSS to the div using a glass ball. In CSS, we add some background-color to the body and give some height,

Design a Rotating Image Gallery App in HTML CSS & JavaScript

We'll gather some images and build a gallery that can be rotated with straightforward buttons. To rotate the images to the right, we'll use the right button, and for left rotation, we'll use the left button. The process will be simple, allowing us to easily rotate the images using these buttons.Prev

How to bind an animation to a division element using CSS ?

In this article, we will learn to bind an animation to a div tag using CSS.A div tag is used to separate the different sections of the contents of the webpage. It makes it very easy for the readers to notice the different sections of the webpage with their specific importance levels on the page. The

Create an Analog Clock using HTML, CSS and JavaScript

Designing an analog clock is an excellent project to enhance your web development skills. This tutorial will guide you through creating a functional analog clock that displays the current time using HTML, CSS, and JavaScript.What Weâ€™re Going to CreateWe will develop a simple analog clock that shows

Create a Trigonometry Toolbox using HTML CSS and JavaScript

This article will demonstrate how we can create a Trigonometry Toolbox using HTML, CSS, and JavaScript. Here, we have to give an angle in degrees as input in the input box and it calculates the corresponding value of the given angle. The application is user-friendly users can easily find the trigono

Responsive analog clock using HTML, CSS and Vanilla JavaScript

In this article, we are going to create an Analog Clock. This is mainly based on HTML, CSS & Vanilla JavaScript.Approach:Create an HTML file in which we are going to add the main div, further on we are adding 4 div tags for an hour, minute, and second hands & for the pin.Create a CSS file fo