CSS 2D Transforms: Move, Rotate, and Scale Elements
CSS transforms let you move, rotate, scale, and skew elements without affecting the document's layout flow. Use it for UI animations like hover effects or modal pop-ups.
Why it exists
To visually manipulate elements without triggering a costly re-layout of the entire page. Animating properties like margin or width forces the browser to recalculate the position of surrounding elements. Transforms, however, are typically handled by the GPU in a separate step (compositing), leading to much smoother animations.
The mental model
Think of an element as a picture on a transparent sheet placed over your webpage. The transform property lets you move (translate), turn (rotate), resize (scale), or slant (skew) that sheet without disturbing the layout of the page underneath. The element's original space in the document flow remains occupied, but its visual rendering is changed.
How it works
You apply one or more transform functions to the transform property. The main 2D functions are translate(x, y) to move, scale(x, y) to resize, rotate(angle) to turn, and skew(x-angle, y-angle) to distort. When you chain multiple functions, they are applied from right to left. For example, in transform: scale(2) translate(10px), the translation happens first, then the scaled element and its movement are both doubled. Applying any transform other than none also creates a new stacking context, which can affect z-index and contain position: absolute children.
When to use it
Use transforms for any UI animation involving motion, rotation, or scaling. This is perfect for hover effects that grow a button, tooltips that slide into view, modals that scale up from the center, or complex loading spinners. Always pair it with the transition property for smooth, performant effects.
When not to use it
Do not use transform for your primary page layout. That's what flexbox, grid, margin, and padding are for. Since transforms don't affect the document flow, a transformed element can easily overlap other elements, which is usually not desired for static layout. Also, some elements, like non-replaced inline boxes (e.g., a with only text), cannot be transformed.
One canonical example
To make a card pop out on hover, you might scale it up and lift it. CSS: div:hover { transform: scale(1.05) translateY(-10px); }. Here, the element is first moved up by 10px, and then the element and its new position are scaled up by 5%. If you wrote translateY(-10px) scale(1.05), it would first scale in place, and then move up by 10px. The order is critical.
Interview question
What is a fundamental characteristic of CSS 2D transforms regarding an element's position and surrounding content?
- a.They are primarily used for defining the structural layout of a page, similar to Flexbox or Grid.
- b.They visually alter an element's appearance (e.g., position, size) but do not change its occupied space in the document flow.Correct
- c.They adjust the element's position within the normal document flow, causing surrounding elements to reflow.
- d.They permanently change an element's dimensions and position, making it impossible for other elements to overlap it.
Why? this is the answer
CSS 2D transforms visually manipulate an element without affecting its original space in the document flow, meaning surrounding elements are not re-laid out. Option C is incorrect because transforms specifically avoid triggering costly re-layouts and do not cause surrounding elements to reflow.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles