In this guide, you will specifically talk about the procedure to rotate a div at an angle of 90 degrees. So, let’s get started!
How to Rotate Div 90 Degrees in CSS?
To rotate the div at 90 degrees in CSS “transform” property is used. As a first step, we will discuss the transform property so that you can better understand how it works.
What is “transform” Property in CSS?
For the transformation of a 2D or 3D element, the “transform” property of CSS is used. This property allows an element to rotate, move, skew and scale.
Syntax
The syntax of the transform property is:
Here is the description of the above values:
- none: It is used to restrict the transformation of any element.
- transform-functions: There are various functions such as “rotate()”, “scale()”, “move()” and “skew()” that can be specified.
Now, let’s move to the practical example of using the transform property for rotating a div 90 degrees in CSS.
Example: Rotating a Div 90 Degrees Using CSS “transform” Property
First of all, in the <body> of HTML, we will create a heading using <h1> tag and a container <div> with the class name as “div2”:
Then, in CSS, use “div” to access the created container in the HTML file. After that, set the width and height of the div as “200px” and “100px”, set the background color of the div as “rgb(129, 129, 38)”. Moreover, we will set the border of div as “5px” width, “solid” type, and “red” color:
width: 200px;
height: 100px;
background: rgb(129, 129, 38);
border: 5px solid red;
}
The outcome of the given code is:
Now, apply the “transform” property and pass “90” degrees as an argument to the rotate() function and transform-origin as “30%”:
transform-origin: 30%;
Save the added code and open the HTML file in the browser. As a result, you will see that the added div is rotated 90 degrees:
We have compiled the easiest method to rotate a div 90 degrees in CSS.
Conclusion
For the rotation of a div 90 degrees in CSS, the “transform” property can be utilized. It is used for the transformation of 2D or 3D elements. Additionally, this property allows an HTML element to be rotated, skewered, scaled, and moved. This manual discussed the procedure of rotating a div 90 degrees in CSS.
