CSS · Layout and visual systems
How do CSS transforms work?
Short answer
transforms move, rotate, scale or skew an element without affecting the layout of surrounding elements. Functions apply in order around transform-origin and can run on the compositor.
Transforms apply a visual transformation to an element's rendered box. Because they do not change layout, neighbours stay where they are. That makes them useful for hover effects, drawers and animations that should not cause reflow.
.badge {
transform: translateX(0.25rem) rotate(-3deg) scale(1.05);
transform-origin: center;
}
.card:hover {
transform: translateY(-2px);
}What to know
- translate, scale, rotate and skew are the main function families
- Functions compose in order, so translate then rotate differs from rotate then translate
- transform-origin sets the point around which rotation and scaling happen
- A transform creates a containing block for fixed and absolute descendants
- A transform also creates a stacking context, which affects z-index
- The individual translate, rotate and scale properties can be animated separately
For simple movement, translate is usually preferable to changing top or left because it does not trigger layout. For 3D effects, perspective on the parent gives depth, but not every interface needs 3D.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Does transform affect layout?
- 2Why does the order of transform functions matter?
- 3How does transform create a stacking context?
- 4When would you use translate instead of top or left?
Say it in the interview
Transforms change how an element is rendered without changing its layout box, so surrounding content does not move. translate, rotate, scale and skew can be combined, and the order matters. Transform originates from transform-origin and creates both a containing block and a stacking context. I use transforms for movement and animation because they are cheaper than animating top or left.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.