CSS Transforms
The transform property moves, rotates, scales, or skews an element visually — without affecting the layout of surrounding elements. The element's original space is preserved; only its visual appearance changes. Transforms are GPU-accelerated, making them the fastest way to create smooth visual effects.
How Transforms Differ from Positioning
DIAGRAM — transform vs position:
Original layout:
[Box A] [Box B] [Box C]
After position: relative; top: 20px on Box B:
[Box A] [ ] [Box C]
[Box B] ← moved, BUT its space in layout is gone
After transform: translateY(20px) on Box B:
[Box A] [Box B] [Box C]
[Box B drawn lower]
↑ The gap stays! Layout is unchanged. B just visually shifts.
translate() — Move an Element
Moves an element horizontally, vertically, or both, without disturbing the layout.
/* Move right 20px, down 10px */
transform: translate(20px, 10px);
/* Move only horizontally */
transform: translateX(50px);
/* Move only vertically */
transform: translateY(-30px);
/* Move using percentage of element's own size */
transform: translate(50%, 50%);
DIAGRAM — translate axes:
↑ translateY(negative)
│
│
────────┼────────→ translateX(positive)
│
↓ translateY(positive)
translate(X, Y) moves along both axes at once.
Classic Centering Trick
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Moves element back by half its own width and height */
}
DIAGRAM — translate centering:
Step 1: top: 50%, left: 50% → top-left corner of element is at center
┌───────────────────────┐
│ ┌──────┐ │
│ │ Box │ │
│ └──────┘ │
Step 2: translate(-50%, -50%) → shift back by half the element's size
┌───────────────────────┐
│ ┌──────┐ │
│ │ Box │ │ ← perfectly centered!
│ └──────┘ │
rotate() — Rotate an Element
Rotates an element clockwise (positive) or counter-clockwise (negative) around its center.
transform: rotate(45deg); /* 45° clockwise */
transform: rotate(-30deg); /* 30° counter-clockwise */
transform: rotate(0.5turn); /* 180° (0.5 full turns) */
DIAGRAM — rotate():
rotate(0deg): [ Box ] ← normal
rotate(45deg): ◆ ← tilted 45° clockwise
(diamond shape)
rotate(180deg): [ xoB ] ← upside down
Spinner Animation with rotate
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}
scale() — Resize an Element
Scales an element up or down from its center. Value 1 = original size. 2 = double size. 0.5 = half size.
transform: scale(1.2); /* 20% larger */
transform: scale(0.8); /* 20% smaller */
transform: scaleX(2); /* double width only */
transform: scaleY(0.5); /* half height only */
transform: scale(1.5, 0.8);/* wider AND shorter */
DIAGRAM — scale():
scale(1): [ Box ] ← original
scale(1.5): [ Box ] ← 50% bigger
scale(0.5): [ Box ] ← half size
Scale does NOT push other elements away.
The space it occupies in layout stays the same.
Hover Zoom with scale
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.03);
}
skew() — Slant an Element
Slants the element along the X-axis, Y-axis, or both.
transform: skewX(20deg); /* tilt left-right */
transform: skewY(10deg); /* tilt top-bottom */
transform: skew(20deg, 10deg);
DIAGRAM — skewX(20deg):
Before: After:
┌──────┐ ╱──────╱
│ Box │ ╱ Box ╱ ← slanted like a parallelogram
└──────┘ ╱──────╱
Combining Multiple Transforms
List multiple transform functions in a single transform declaration, separated by spaces. They apply in order from left to right.
/* Rotate AND scale */
transform: rotate(45deg) scale(1.2);
/* Move AND rotate */
transform: translateX(100px) rotate(30deg);
/* Move, rotate, scale */
transform: translate(50px, 20px) rotate(10deg) scale(0.9);
Order matters! rotate(45deg) translate(100px) gives a different result than translate(100px) rotate(45deg) because each transform is applied relative to the current coordinate system.
transform-origin — Change the Pivot Point
By default, transforms happen around the center of the element. transform-origin moves that pivot point.
transform-origin: center; /* default */
transform-origin: top left; /* pivot from top-left corner */
transform-origin: bottom center;
transform-origin: 0% 0%; /* same as top left */
transform-origin: 100% 100%; /* bottom right */
transform-origin: 30px 60px; /* specific pixel position */
DIAGRAM — rotate(45deg) with different transform-origin:
transform-origin: center (default):
◆ ← rotates around center like a wheel
transform-origin: top left:
Box─┐ ← top-left corner stays fixed,
◢ │ rest of element swings like a door
3D Transforms
CSS supports three-dimensional transforms using a Z-axis that comes toward and away from the viewer.
/* Move toward viewer */
transform: translateZ(50px);
/* Rotate around Y-axis (flip like a page) */
transform: rotateY(180deg);
/* Rotate around X-axis (flip forward/backward) */
transform: rotateX(30deg);
/* Full 3D shorthand */
transform: rotate3d(1, 1, 0, 45deg);
3D Card Flip Effect
.card-wrap {
perspective: 600px; /* depth of 3D space */
}
.card {
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card-front, .card-back {
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
.card-wrap:hover .card {
transform: rotateY(180deg);
}
perspective — The 3D Depth Setting
perspective controls how dramatic 3D transforms look. A low value creates extreme depth; a high value looks nearly flat.
DIAGRAM — perspective values:
perspective: 200px: Strong 3D effect (very dramatic tilt)
perspective: 600px: Moderate 3D (natural looking)
perspective: 2000px: Subtle 3D (barely noticeable)
Performance Note
transform and opacity are the two CSS properties that the browser renders on the GPU compositor thread. This means they run smoothly at 60fps even when other page work is happening. Always prefer transform: translateX() over left: or margin-left: for smooth animations.
Common Transform Recipes
/* Center element absolutely */
transform: translate(-50%, -50%);
/* Hover button press */
transform: scale(0.96);
/* Gentle card lift */
transform: translateY(-4px);
/* Rotate icon */
transform: rotate(180deg); /* flip arrows for accordion */
/* Flip horizontally */
transform: scaleX(-1);
Transforms are the foundation of CSS animation and interaction design. Every modern interface uses them — from card hovers to modals sliding in to spinners. Mastering translate, rotate, and scale covers 90% of real-world transform needs.