CSS 2D Transforms
The transform property lets you move, scale, rotate, or skew an element without affecting layout. 2D transforms are the bread-and-butter — fast, GPU-accelerated, animation-friendly.
The 2D functions
| Function | Effect | Example |
|---|---|---|
translate(x, y) | Move along x and y axes. | translate(20px, -10px) |
translateX / translateY | One axis only. | translateY(-4px) |
scale(n) | Resize uniformly. | scale(1.05) |
rotate(deg) | Rotate around the origin. | rotate(15deg) |
skewX / skewY | Slant the element. | skewX(-10deg) |
matrix(a,b,c,d,e,f) | All of the above as a single matrix. | Rarely written by hand. |
Chaining
CSS
.btn:hover {
transform: translateY(-2px) scale(1.02);
transition: transform 0.15s ease;
}
transform-origin
By default the origin is the centre of the element. Change it to make rotations and scales pivot from a corner:
CSS
.icon:hover {
transform: rotate(15deg);
transform-origin: bottom right;
}
Tip: Animating
transform and opacity is cheap because the browser uses the GPU. Animating top/left/width triggers layout work — avoid it for smooth 60fps.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS 2D Transforms</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Lift the button by 2px on hover.
.btn:hover { transform:
(-2px); }
A single-axis vertical move.
Discussion
Loading…