Chapter 34: Transforms
Transforms (transform property)
Transforms are what let you move, rotate, scale, skew, or translate elements in 2D or 3D space — without affecting the layout flow of other elements.
In simple words:
Transform changes how an element looks (position, size, rotation, shape) but does not affect the space it occupies in the document flow (unlike position: absolute or margin changes)
That’s why transforms are perfect for animations, hover effects, transitions, and micro-interactions — they are very performant (GPU-accelerated in modern browsers).
1. The Main Transform Functions (What You Use Every Day)
| Function | What it does | Common values / examples | Typical real-world use |
|---|---|---|---|
| translate() | Move element in X and/or Y direction | translate(50px, 20px), translateX(30px), translateY(-10%) | Slide in menus, hover lift, parallax |
| scale() | Resize element (grow or shrink) | scale(1.1), scale(0.95), scaleX(1.2) | Zoom on hover, button press effect |
| rotate() | Rotate element around its center | rotate(45deg), rotate(-15deg) | Spinning loaders, card flip, angled badges |
| skew() | Slant/shear element (distort perspective) | skew(20deg), skewX(-10deg) | 3D card tilt on hover, retro effects |
| perspective() | Gives 3D depth (used with rotateX/Y/Z) | perspective(800px) on parent | 3D card flip, book/page curl effects |
| rotateX(), rotateY(), rotateZ() | Rotate in 3D space | rotateY(180deg) | Card flip animation, 3D carousel |
| matrix(), matrix3d() | Low-level math control (rarely used directly) | — | Advanced animations or libraries |
Most common combination in 2026:
CSS
|
0 1 2 3 4 5 6 |
transform: translateY(-8px) scale(1.05) rotate(2deg); |
2. Important Rules & Gotchas
- transform creates a new stacking context (like position: relative + z-index) → It affects how z-index works and how children are painted
- transform: none → resets everything
- Performance tip: transform and opacity are GPU-accelerated → very smooth even on mobile Avoid animating width, height, margin, top/left — they cause layout/reflow (slow)
- Combine with transition → magic happens:
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
.card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .card:hover { transform: translateY(-12px) scale(1.03) rotate(1deg); box-shadow: 0 20px 40px rgba(0,0,0,0.15); } |
3. Real, Playable Example – Hover Effects + 3D Card
index.html
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transforms – Webliance</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Transforms Playground</h1> <p>Hover over each card — feel the movement & depth</p> <div class="cards"> <!-- Simple translate + scale --> <div class="card lift"> <h2>Lift Effect</h2> <p>translateY + scale + shadow</p> </div> <!-- Rotate on hover --> <div class="card rotate"> <h2>Rotate Tilt</h2> <p>Small rotation + lift</p> </div> <!-- 3D card flip (hover to see back) --> <div class="card flip-container"> <div class="flip-card"> <div class="front">Hover Me!</div> <div class="back"> <h3>Surprise!</h3> <p>You found the back side 😄</p> </div> </div> </div> <!-- Skew + scale --> <div class="card skew"> <h2>Skew Distortion</h2> <p>Old-school hover fun</p> </div> </div> </div> </body> </html> |
style.css (only transform-focused)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
/* Reset + base */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family: system-ui, sans-serif; background: #f8fafc; color: #1e293b; padding: 60px 20px; min-height: 100vh; } .container { max-width: 1100px; margin: 0 auto; text-align: center; } h1 { margin-bottom: 3rem; color: #1d4ed8; } /* Grid for cards */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; } /* Base card style */ .card { background: white; border-radius: 16px; padding: 2.5rem; box-shadow: 0 6px 20px rgba(0,0,0,0.08); text-align: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; cursor: pointer; position: relative; overflow: hidden; } .card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.15); } /* ── Different transform effects ── */ .lift:hover { transform: translateY(-12px) scale(1.04); } .rotate:hover { transform: translateY(-8px) rotate(3deg) scale(1.03); } .skew:hover { transform: translateY(-6px) skew(-8deg) scale(1.05); } /* 3D flip card */ .flip-container { perspective: 1000px; } .flip-card { position: relative; width: 100%; height: 220px; transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); transform-style: preserve-3d; } .flip-container:hover .flip-card { transform: rotateY(180deg); } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; } .front { background: #3b82f6; color: white; } .back { background: #10b981; color: white; transform: rotateY(180deg); } |
What You Should Do Right Now
- Open with Live Server
- Hover each card — notice:
- Lift → moves up + grows slightly
- Rotate → tilts playfully
- Skew → old-school distortion
- Flip → 3D card turns around
- Try these quick experiments:
- Change 0.4s to 0.8s → slower, more dramatic
- Replace ease with cubic-bezier(0.68, -0.55, 0.265, 1.55) → bouncy/spring effect
- Add transition-delay: 0.1s → slight lag before movement
- In .flip-card → change 0.6s to 1s → slower flip
Quick Transitions + Transforms Mastery Checklist (2026)
- Prefer transform over top/left/margin for movement (GPU-accelerated)
- Use cubic-bezier() for natural, bouncy feels (try https://cubic-bezier.com)
- Keep durations 0.25s–0.6s — too long feels sluggish
- Combine transform + opacity + box-shadow for premium hover effects
- For 3D → add perspective on parent + transform-style: preserve-3d
- Test on mobile — touch hover is different (use :active too)
How does the 3D flip card feel when you hover? That smooth rotation is exactly why transforms + transitions are everywhere in 2026 design.
Next possible lessons — tell me what you want:
- “10 beautiful hover effects using transform + transition”
- “3D card flip / carousel with pure CSS”
- “transition vs @keyframes animation — when to use which”
- “performance tips for transforms on mobile”
- “combine transforms with custom properties”
You’ve just added motion & delight to your websites. Chai khatam? Fresh cup lao — let’s keep animating! 🚀 😄
