CSS Advanced
CSS 2D Transforms
The transform property moves, rotates, scales, and skews elements without affecting the document flow around them. 2D transforms are hardware-accelerated and pair beautifully with transitions for smooth hover effects.
The transform functions
transform accepts one or more functions. Because transforms do not reflow the page, they are performant and ideal for animation.
| Function | Effect |
|---|---|
| translate(x, y) | Moves the element horizontally and vertically |
| rotate(angle) | Rotates around the transform-origin |
| scale(x, y) | Grows or shrinks the element |
| skew(x-angle, y-angle) | Slants the element |
| matrix(...) | Combines all 2D transforms in one function |
transform: translate(20px, 10px);
transform: rotate(15deg);
transform: scale(1.2);
transform: skewX(-12deg);
transform: translateX(10px) rotate(8deg) scale(1.05); /* combined */<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display:flex; gap:24px; padding:40px; background:#0f172a; }
.box { width:100px; height:100px; border-radius:12px; color:#fff;
display:flex; align-items:center; justify-content:center; font-weight:bold;
transition: transform .3s ease; }
.move { background:#6366f1; } .move:hover { transform: translateY(-16px); }
.spin { background:#ec4899; } .spin:hover { transform: rotate(20deg); }
.grow { background:#10b981; } .grow:hover { transform: scale(1.25); }
</style>
</head>
<body>
<div class="box move">move</div>
<div class="box spin">spin</div>
<div class="box grow">grow</div>
</body>
</html>transform-origin
By default transforms pivot around the element's center. transform-origin changes that anchor point, so rotate and scale can pivot from a corner or edge instead.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display:flex; gap:40px; padding:50px; background:#f1f5f9; }
.card { width:90px; height:90px; background:#f97316; border-radius:8px;
transition: transform .4s ease; }
.center:hover { transform: rotate(30deg); transform-origin: center; }
.corner { transform-origin: top left; }
.corner:hover { transform: rotate(30deg); }
</style>
</head>
<body>
<div class="card center"></div>
<div class="card corner"></div>
</body>
</html>Skew and combining transforms
skew slants an element along the X or Y axis. When you chain multiple functions in one transform, they apply from right to left, so order matters.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display:grid; place-items:center; height:220px; background:#111827; }
.tag {
background:linear-gradient(90deg,#22d3ee,#818cf8);
color:#06283d; font-weight:bold; padding:14px 40px;
transform: skewX(-14deg);
}
.tag span { display:inline-block; transform: skewX(14deg); }
</style>
</head>
<body>
<div class="tag"><span>SALE</span></div>
</body>
</html>Counter-skew inner content (skew the child by the opposite angle) so text inside a skewed shape stays upright and readable.
Chained transform functions apply right to left. translate then rotate looks different from rotate then translate.
Key points
- transform moves, rotates, scales, and skews without reflowing the page.
- Functions can be combined in a single transform value.
- transform-origin sets the pivot point for rotate and scale.
- Chained functions apply right to left, so order matters.
- Transforms pair with transitions for smooth hover effects.