Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Rotate the element based on an angle using CSS
The CSS transform: rotate() property is used to rotate an element by a specified angle. The rotation is applied around the element's center point by default.
Syntax
selector {
transform: rotate(angle);
}
Possible Values
| Value | Description |
|---|---|
deg |
Degrees (0deg to 360deg) |
rad |
Radians (0rad to 6.28rad) |
turn |
Turns (0.5turn = 180deg) |
Example: Basic Element Rotation
The following example demonstrates how to rotate an element by 20 degrees −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
height: 100px;
background-color: #ff69b4;
border: 2px solid #333;
margin: 50px;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
}
.normal {
margin-bottom: 20px;
}
.rotated {
transform: rotate(20deg);
}
</style>
</head>
<body>
<div class="box normal">
Normal Element
</div>
<div class="box rotated">
Rotated Element (20deg)
</div>
</body>
</html>
Two pink boxes appear: the first one is normal and horizontal, the second one is tilted clockwise by 20 degrees. Both boxes contain centered text.
Example: Different Rotation Angles
You can rotate elements by different angles to create various effects −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 30px;
margin: 50px;
}
.item {
width: 80px;
height: 80px;
background-color: #4CAF50;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.rotate-45 {
transform: rotate(45deg);
}
.rotate-90 {
transform: rotate(90deg);
}
.rotate-135 {
transform: rotate(135deg);
}
</style>
</head>
<body>
<div class="container">
<div class="item">0°</div>
<div class="item rotate-45">45°</div>
<div class="item rotate-90">90°</div>
<div class="item rotate-135">135°</div>
</div>
</body>
</html>
Four green squares are displayed in a row, each rotated by different angles: 0°, 45°, 90°, and 135°. Each square shows its rotation angle in white text.
Conclusion
The transform: rotate() property provides an easy way to rotate elements at any angle. Use positive values for clockwise rotation and negative values for counterclockwise rotation.
Updated on: 2026-03-15T12:07:30+05:30
308 Views
Advertisements