CSS Transforms & 3D
Lesson 13 • Expert Track
What You'll Learn
💡 Think of It Like This
2D transforms are like moving a sticker on a flat desk — you can slide it, spin it, stretch it, or tilt it. 3D transforms add depth — imagine holding a playing card and flipping it over, or spinning a globe. The perspective property is like how close your eyes are to the object — closer means more dramatic depth.
1. 2D Transform Functions
| Function | What It Does | Example |
|---|---|---|
translate(x, y) | Moves element without affecting layout | translate(50px, -20px) |
scale(x, y) | Resizes element (1 = original) | scale(1.5) |
rotate(angle) | Rotates clockwise | rotate(45deg) |
skew(x, y) | Tilts/slants element | skewX(15deg) |
2D Transforms
Hover to see translate, scale, rotate, and skew in action
<!DOCTYPE html>
<html>
<head>
<title>2D Transforms</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 30px;
color: #e5e7eb;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 500px;
}
.box {
width: 120px;
height: 120px;
background: #3b82f6;
border-radius: 12px;
display: flex;
align-items: center;
justify-conte
...2. 3D Transforms & Perspective
3D transforms add a Z-axis (depth). The perspective property controls how "deep" the 3D effect feels — lower values create more dramatic perspective.
| Property | Purpose |
|---|---|
perspective: 800px; | Distance from viewer to 3D plane (on parent) |
transform-style: preserve-3d; | Keeps children in 3D space (not flattened) |
backface-visibility: hidden; | Hides the back of rotated elements |
3. Practical: 3D Flip Card
The classic 3D effect — a card that flips to reveal content on the back:
3D Flip Card
Hover to flip the card and reveal the back
<!DOCTYPE html>
<html>
<head>
<title>3D Flip Card</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 40px;
color: #e5e7eb;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.cards { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.flip-card {
width: 220px;
height: 280px;
perspective: 800px;
cursor: pointer;
}
.fl
...4. Advanced: Rotating 3D Cube
The ultimate 3D CSS demo — a spinning cube with six faces positioned in 3D space:
3D Rotating Cube
A pure CSS 3D cube using @keyframes and preserve-3d
<!DOCTYPE html>
<html>
<head>
<title>3D Cube</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
color: #e5e7eb;
}
.scene {
width: 200px;
height: 200px;
perspective: 600px;
margin: 40px;
}
.cube {
width: 200px;
height: 200px;
position:
...⚠️ Common Mistakes
- Forgetting perspective on the parent — 3D transforms look flat without
perspectiveon the container element. - Missing transform-style: preserve-3d — Without this, child elements are flattened into 2D, destroying the 3D effect.
- Not hiding backfaces — For flip cards, you need
backface-visibility: hiddenon both faces, or you'll see through to the back. - Animating too many 3D elements — 3D transforms are GPU-intensive. Limit simultaneous 3D animations to avoid frame drops.
🎉 Lesson Complete
You can now manipulate elements in 2D and 3D space with CSS:
- ✅ translate, scale, rotate, skew for 2D transforms
- ✅ rotateX, rotateY, translateZ for 3D transforms
- ✅ perspective controls depth perception
- ✅ preserve-3d keeps children in 3D space
- ✅ backface-visibility: hidden for flip cards
Sign up for free to track which lessons you've completed and get learning reminders.