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.
The rotate() transformation function can be used as the value to rotate the element. It takes one parameter which 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), gradient (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 to 100 gradient or 0.25 turns.
Applying this property to the required element would rotate it by 90 degrees.
Example: The example uses a rectangle and one side of a border to explain the rotation.
- Before clicking the button:
- After clicking the button:
- How to rotate a text 360 degrees on hover using HTML and CSS?
- Rotate a polygon by given degrees in p5.js
- How to overlay one div over another div using CSS
- How to copy the content of a div into another div using jQuery ?
- How to center a div within another div?
- How to clear all div's content inside a parent div ?
- Display div element on hovering over <a> tag using CSS
- How to center absolutely positioned element in div using CSS ?
- How to dynamically set the height and width of a div element using jQuery ?
- How to rotate an element using CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.