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
X-axis 3D transform with CSS3
The CSS rotateX() function is used to rotate an element around its X-axis in 3D space. This creates a horizontal rotation effect, making the element appear to flip vertically.
Syntax
selector {
transform: rotateX(angle);
}
The angle value can be specified in degrees (deg) or radians (rad).
Example
The following example demonstrates X-axis 3D rotation by comparing a normal element with a rotated one −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
}
#rotatedDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<div>Normal Element</div>
<p>Rotated X-axis (150 degrees):</p>
<div id="rotatedDiv">Rotated Element</div>
</body>
</html>
Two pink boxes appear on the page. The first box displays "Normal Element" in its standard orientation. The second box shows "Rotated Element" rotated 150 degrees around the X-axis, appearing flipped and compressed vertically due to the 3D perspective.
Conclusion
The rotateX() function provides an easy way to create 3D rotation effects around the horizontal axis. Combine it with CSS transitions for smooth animation effects.
Updated on: 2026-03-15T12:21:39+05:30
127 Views
Advertisements