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
Recommended Articles