CSS Reference
transform
Moves, rotates, scales, and skews elements without affecting layout. The foundation of CSS animation.
Last updated: October 2026
Definition: The transform property visually transforms an element without changing its actual position in the layout. The space the element occupies stays the same, but its appearance moves. It supports 2D and 3D transformations and is GPU-accelerated for smooth animation.
🎬 Live Examples
Six transform functions, each in its own box.
💡 Transforms don't affect the layout. Notice the boxes stay in their original grid cells.
Basic Syntax
.element {
transform: translateX(20px);
}
.element {
transform: rotate(45deg);
}
/* Chain multiple transforms (order matters) */
.element {
transform: translateX(20px) rotate(45deg) scale(1.5);
}🎯 All transform Functions
| Function | Purpose | Example |
|---|---|---|
translate(x, y) | Moves the element | translate(10px, 20px) |
translateX(x) | Moves horizontally | translateX(20px) |
translateY(y) | Moves vertically | translateY(-10px) |
rotate(deg) | Rotates clockwise | rotate(45deg) |
scale(x, y) | Scales size | scale(1.2), scale(1, 2) |
scaleX(x) / scaleY(y) | Scale one axis | scaleX(1.5) |
skew(x, y) | Slants the element | skewX(-15deg) |
matrix(...) | Low-level 2D matrix | Rarely used manually |
none | Remove all transforms | Reset |
The Classic Centering Trick
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}The -50%, -50% values are relative to the element's own size. This moves it back by half its width and height, centering it perfectly. Still one of the most-used transform patterns.
Hover Lift Effect
.card {
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
}Because transform doesn't affect layout, the neighboring cards don't move. This creates a smooth, GPU-accelerated lift on hover.
transform-origin
By default, transforms originate from the center of the element. Change the anchor with transform-origin.
/* Rotate around the top-left corner */
.rotate-tl {
transform-origin: top left;
transform: rotate(15deg);
}
/* Scale from the bottom */
.grow-up {
transform-origin: bottom;
transform: scale(1.5);
}
/* Pop from center (default) */
.pop {
transform-origin: center;
transform: scale(1.2);
}Accepts keywords (top, center, bottom, left, right), percentages, or pixel values.
3D Transforms
/* Perspective on the parent */
.scene {
perspective: 1000px;
}
/* 3D rotation */
.card-3d {
transform: rotateY(45deg);
}
/* Flip on hover */
.flip-card:hover .card-inner {
transform: rotateY(180deg);
}
/* Preserve 3D for children */
.card-inner {
transform-style: preserve-3d;
}3D transforms require perspective on the parent for depth. Great for flip cards, tilt effects, and rotating cubes.
Transform Order Matters
Transforms apply left to right. Changing the order changes the result.
/* Move first, then rotate */
.a {
transform: translateX(50px) rotate(45deg);
}
/* Rotate first, then move (moves in rotated direction) */
.b {
transform: rotate(45deg) translateX(50px);
}This is a common source of confusion. If your transforms look wrong, try reordering.
🎯 Common transform Patterns
| Effect | Transform |
|---|---|
| Centered modal | translate(-50%, -50%) |
| Hover lift | translateY(-4px) |
| Slight zoom on hover | scale(1.05) |
| Full-size image on hover | scale(1.1) |
| Menu slide in | translateX(-100%) |
| Notification pop | scale(0) → scale(1) |
| Icon rotate on click | rotate(180deg) |
⚠️ Common Mistakes
- Using position to move elements for animation. Use transform — it doesn't cause reflows and is GPU-accelerated.
- Forgetting the
degunit on rotate.rotate(45)is invalid. Userotate(45deg). - Mixing transforms in multiple declarations. Only the last
transformwins. Combine them in one line. - Forgetting that transform creates a stacking context. Child z-index values become scoped to the transformed element.
- Using
scale()on text without testing. Scaled text can look blurry on some browsers and hurt readability. - Expecting transform to affect layout. Transform is visual only. Use position or flexbox for layout changes.
- Not testing with
prefers-reduced-motion. Some users get motion sickness from animations. Respect their preference.
♿ Accessibility Notes
- Respect
prefers-reduced-motion. Disable non-essential transforms for users who've opted out of motion. - Never transform the reading order. Screen readers read in DOM order — a visually reordered element confuses assistive tech.
- Don't move content off-screen as a hiding technique. Use
clip-pathor a visually-hidden class instead. - Transformed elements can clip. If a transformed element extends beyond its parent and the parent has
overflow: hidden, part of it disappears. - Avoid transform on focusable elements with outlines. The outline may not follow the transform on all browsers. Test carefully.
❓ Frequently Asked Questions
What is the CSS transform property?
The transform property moves, rotates, scales, or skews an element without affecting the layout of surrounding elements. It is the foundation of modern CSS animations, hover effects, and 3D interfaces.
What is the difference between transform and position?
position moves elements within the layout flow. transform moves elements visually without affecting layout — the space the element occupies stays the same. This makes transform better for animations because it doesn't cause reflows.
What does translate(-50%, -50%) do?
translate(-50%, -50%) moves the element back by half its own width and height. Combined with top: 50%; left: 50%, it perfectly centers an absolutely positioned element. This is a classic centering trick.
Does transform create a stacking context?
Yes. Any element with a transform value other than 'none' creates a new stacking context. This means child z-index values are scoped to that element and cannot be compared with elements outside it.
How do I combine multiple transforms?
Chain them in a single transform declaration, separated by spaces. Example: transform: translateX(20px) rotate(45deg) scale(1.5). Order matters — transforms apply left to right.