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 transform the element by using x-axis with CSS3
The CSS rotateX() transform function rotates an element around its X-axis in 3D space. This creates a perspective effect where the element appears to flip forward or backward.
Syntax
transform: rotateX(angle);
Where angle can be specified in degrees (deg), radians (rad), or turns.
Example: Basic X-Axis Rotation
The following example demonstrates how to rotate an element 45 degrees around the X-axis −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
margin: 50px;
}
.box {
width: 200px;
height: 100px;
background-color: #3498db;
border: 2px solid #2980b9;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
font-family: Arial, sans-serif;
}
.rotated {
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box">Original Element</div>
<div class="box rotated">Rotated X-axis 45°</div>
</div>
</body>
</html>
Two blue boxes are displayed. The first box appears normal, while the second box is rotated 45 degrees around the X-axis, creating a 3D perspective effect where the top edge appears closer and the bottom edge appears farther away.
Example: Multiple Rotation Angles
This example shows different rotation angles to demonstrate the effect −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
display: flex;
gap: 20px;
flex-wrap: wrap;
padding: 20px;
}
.box {
width: 120px;
height: 80px;
background: linear-gradient(45deg, #e74c3c, #c0392b);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
border-radius: 8px;
}
.rotate-30 { transform: rotateX(30deg); }
.rotate-60 { transform: rotateX(60deg); }
.rotate-90 { transform: rotateX(90deg); }
.rotate-120 { transform: rotateX(120deg); }
</style>
</head>
<body>
<div class="container">
<div class="box">Original</div>
<div class="box rotate-30">30°</div>
<div class="box rotate-60">60°</div>
<div class="box rotate-90">90°</div>
<div class="box rotate-120">120°</div>
</div>
</body>
</html>
Five red gradient boxes are displayed in a row. Each box shows progressively more X-axis rotation (0°, 30°, 60°, 90°, 120°), demonstrating how the 3D perspective effect becomes more pronounced with larger rotation angles.
Key Points
- The
perspectiveproperty on the parent container enhances the 3D effect - Positive angles rotate the element forward (top edge closer)
- Negative angles rotate the element backward (bottom edge closer)
- A 90-degree rotation makes the element appear as a thin line
Conclusion
The rotateX() function is essential for creating 3D rotation effects around the X-axis. Combined with perspective, it enables realistic 3D transformations for modern web interfaces.
Updated on: 2026-03-15T12:01:59+05:30
283 Views
Advertisements