Skip to content

Commit a82f1b5

Browse files
mamtawardhanimamtawardhani
authored
[Term Entry] CSS Transform function: rotateX() (#7719)
* [Edit] Python: Python CLI arguments * Update command-line-arguments.md * [Term Entry] CSS Transform function: rotateX() * Add files via upload * Apply suggestion from @avdhoottt * Apply suggestion from @avdhoottt * Apply suggestion from @avdhoottt ---------
1 parent b2566bc commit a82f1b5

File tree

4 files changed

+221
-0
lines changed

4 files changed

+221
-0
lines changed

‎content/css/concepts/transform-functions/terms/rotateX/rotateX.md‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
---
2+
Title: 'rotateX()'
3+
Description: 'Rotates an element around the x-axis in 3D space.'
4+
Subjects:
5+
- 'Web Design'
6+
- 'Web Development'
7+
Tags:
8+
- 'Animation'
9+
- 'CSS'
10+
- 'Functions'
11+
- 'Transform'
12+
CatalogContent:
13+
- 'learn-css'
14+
- 'paths/front-end-engineer-career-path'
15+
---
16+
17+
The **`rotateX()`** function is a CSS transform function that rotates an element around the x-axis, which runs horizontally through the element. It is primarily used to create 3D rotation effects, especially when combined with perspective.
18+
19+
## Syntax
20+
21+
```pseudo
22+
transform: rotateX(angle);
23+
```
24+
25+
**Parameters:**
26+
27+
- `angle`: A CSS `<angle>` value (e.g., `45deg`, `0.5rad`) that specifies the amount of rotation around the x-axis. Using a positive angle results in clockwise rotation (the top moves back, and the bottom moves forward). Using a negative angle causes counter-clockwise rotation (the top moves forward, and the bottom moves back).
28+
29+
**Return value:**
30+
31+
The `rotateX()` function returns a `<transform-function>` value that can be used with the `transform` property.
32+
33+
## Example 1: Tilting a Card Forward
34+
35+
In this example, a card element is rotated forward along the x-axis to create a tilt effect. The HTML code is:
36+
37+
```html
38+
<!DOCTYPE html>
39+
<html>
40+
<head>
41+
<link rel="stylesheet" href="style.css" />
42+
<title>RotateX Card Example</title>
43+
</head>
44+
<body>
45+
<div class="card">Tilted Card</div>
46+
</body>
47+
</html>
48+
```
49+
50+
The CSS code is:
51+
52+
```css
53+
body {
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
height: 100vh;
58+
background-color: #f0f0f0;
59+
}
60+
61+
.card {
62+
width: 200px;
63+
height: 120px;
64+
background-color: #3498db;
65+
color: white;
66+
font-size: 20px;
67+
font-weight: bold;
68+
display: flex;
69+
justify-content: center;
70+
align-items: center;
71+
transform: rotateX(30deg);
72+
}
73+
```
74+
75+
This example results in the following output:
76+
77+
![A rectangular card rotated forward along the x-axis at 30 degrees, creating a 3D tilt effect with depth perception.](https://raw.githubusercontent.com/Codecademy/docs/main/media/rotateX1.png)
78+
79+
## Example 2: Interactive Flip on Hover
80+
81+
In this example, a card flips forward when hovered over, simulating a 3D interactive effect. The HTML code is:
82+
83+
```html
84+
<!DOCTYPE html>
85+
<html>
86+
<head>
87+
<link rel="stylesheet" href="style.css" />
88+
<title>RotateX Hover Animation</title>
89+
</head>
90+
<body>
91+
<div class="flip-card">Hover Me</div>
92+
</body>
93+
</html>
94+
```
95+
96+
The CSS code is:
97+
98+
```css
99+
body {
100+
display: flex;
101+
justify-content: center;
102+
align-items: center;
103+
height: 100vh;
104+
background-color: #ecf0f1;
105+
}
106+
107+
.flip-card {
108+
width: 150px;
109+
height: 80px;
110+
font-size: 18px;
111+
font-weight: bold;
112+
background-color: #e74c3c;
113+
color: white;
114+
border-radius: 8px;
115+
display: flex;
116+
justify-content: center;
117+
align-items: center;
118+
transition: transform 0.5s ease;
119+
}
120+
121+
.flip-card:hover {
122+
transform: rotateX(180deg);
123+
}
124+
```
125+
126+
This example results in the following output:
127+
128+
![A rectangular card that flips forward 180 degrees along the x-axis when hovered, showing a 3D flip animation effect.](https://raw.githubusercontent.com/Codecademy/docs/main/media/rotateX2.gif)
129+
130+
## Example 3: Image Panel Stack with 3D Rotation
131+
132+
In this example, multiple images are stacked and rotated along the x-axis for a layered 3D effect. The HTML code is:
133+
134+
```html
135+
<!DOCTYPE html>
136+
<html>
137+
<head>
138+
<link rel="stylesheet" href="style.css" />
139+
<title>3D Image Stack</title>
140+
</head>
141+
<body>
142+
<div class="image-stack">
143+
<div class="image-panel panel1">1</div>
144+
<div class="image-panel panel2">2</div>
145+
<div class="image-panel panel3">3</div>
146+
</div>
147+
</body>
148+
</html>
149+
```
150+
151+
The CSS code is:
152+
153+
```css
154+
body {
155+
display: flex;
156+
justify-content: center;
157+
align-items: flex-start;
158+
height: 100vh;
159+
background: linear-gradient(120deg, #ff7e5f, #feb47b);
160+
}
161+
162+
.image-stack {
163+
display: flex;
164+
flex-direction: column;
165+
gap: 20px;
166+
}
167+
168+
.image-panel {
169+
width: 100px;
170+
height: 100px;
171+
background-color: #3498db;
172+
display: flex;
173+
justify-content: center;
174+
align-items: center;
175+
color: white;
176+
font-size: 18px;
177+
font-weight: bold;
178+
border-radius: 6px;
179+
transition: transform 0.3s ease;
180+
}
181+
182+
.panel1 {
183+
transform: rotateX(15deg);
184+
}
185+
186+
.panel2 {
187+
transform: rotateX(30deg);
188+
}
189+
190+
.panel3 {
191+
transform: rotateX(45deg);
192+
}
193+
194+
.image-panel:hover {
195+
transform: rotateX(60deg);
196+
}
197+
```
198+
199+
This example results in the following output:
200+
201+
![Three stacked square panels rotated along the x-axis with increasing angles, creating a layered 3D effect; each panel rotates further on hover.](https://raw.githubusercontent.com/Codecademy/docs/main/media/rotateX3.gif)
202+
203+
## Frequently Asked Questions
204+
205+
### 1. What is `rotateX`?
206+
207+
`rotateX()` is a CSS transform function that rotates an element forward or backward around its horizontal x-axis, creating a 3D rotation effect.
208+
209+
### 2. What is `rotate()` in CSS?
210+
211+
`rotate()` rotates an element around a single 2D axis (the z-axis) in its plane. It is simpler than `rotateX()` and does not create a 3D effect.
212+
213+
### 3. How to use `rotateX`?
214+
215+
Use `rotateX(angle)` with the CSS `transform` property. Optionally combine it with `perspective` to enhance the 3D visual effect. Example:
216+
217+
```css
218+
.element {
219+
transform: perspective(500px) rotateX(45deg);
220+
}
221+
```

‎media/rotateX1.png‎

4.42 KB
Loading

‎media/rotateX2.gif‎

117 KB
Loading

‎media/rotateX3.gif‎

139 KB
Loading

0 commit comments

Comments
 (0)