CSS Transform
Transform Functions
Quick Reference
| Function | Values | Effect |
|---|---|---|
translate(x, y) |
50px, -30px, 50% |
Move element |
translateX(x) |
50px |
Horizontal move |
translateY(y) |
-30px |
Vertical move |
scale(n) |
1.5, 2, 0.5 |
Scale (1 = original) |
scaleX(n) |
1.5 |
Horizontal scale |
scaleY(n) |
0.8 |
Vertical scale |
rotate(deg) |
45deg, 90deg, -180deg |
Rotate (positive = clockwise) |
skew(x, y) |
10deg, -5deg |
Skew distortion |
skewX(deg) |
10deg |
Horizontal skew |
skewY(deg) |
10deg |
Vertical skew |
transform-origin |
center, top left, 50% 50% |
Transform origin point |
translate (Move)
Example
HTML
<style>
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: transform 0.3s;
}
.box:hover {
transform: translate(50px, 20px);
}
</style>
<div class="box">Hover to move</div>
scale (Resize)
Example
HTML
<style>
.box {
width: 100px;
height: 100px;
background: #e74c3c;
transition: transform 0.3s;
}
.box:hover {
transform: scale(1.5);
}
</style>
<div class="box">Hover to enlarge</div>
rotate (Rotate)
Example
HTML
<style>
.box {
width: 100px;
height: 100px;
background: #2ecc71;
transition: transform 0.3s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
<div class="box">Hover to rotate</div>
transform-origin
Changes the rotation/scale reference point:
Example
HTML
<style>
.box {
width: 100px;
height: 100px;
background: #9b59b6;
transform-origin: top left;
transition: transform 0.3s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
<div class="box">Rotate from top-left corner</div>
Combining Transforms
Multiple transforms execute right to left (reverse order):
CSS
.box {
transform: translateX(50px) rotate(45deg) scale(1.2);
/* First scale → Then rotate → Finally translate */
}
❓ FAQ
Q What's the difference between transform and changing top/left?
A transform only triggers the composite stage — doesn't cause layout or paint reflow, better performance. Changing top/left triggers reflow, causing page jank. For animations, prefer transform.
Q What does transform: translate(-50%, -50%) with position: absolute do?
A Classic centering solution. `top: 50%; left: 50%; transform: translate(-50%, -50%);` first positions element's top-left corner at parent center, then translate moves back by half its own dimensions for perfect centering.
Q Do 3D transforms need special setup?
A When using `translateZ()`, `rotateX()`, `rotateY()` etc., add `perspective` to parent (like `perspective: 1000px`), otherwise 3D effects may not be visible. 3D transforms trigger GPU acceleration, better performance than 2D.
📖 Summary
transformis the foundation of CSS animation — translate, scale, rotate, skew can combine into countless effects- Transforms don't affect document flow (element "looks" different but occupies same space)
- 3D transforms need
perspectivefor depth effects - When combining transforms, put translate last (code order first)
📝 Exercises
- Create a box that moves right 50px and scales 1.5x on hover.
- Create an image that rotates 180° around Y-axis on hover (needs
perspective). - Create a "flip card" — hover flips card to show back content (using
rotateYandbackface-visibility). - Use
transform-originto change rotation center, create a "pendulum" effect.